分类
svg

css语法解析系列~animation

animation: <single-animation>#

single-animation

single-animation=<time> || <easing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state> || [none | <keyframes-name>]

single-animation-direction

single-animation-direction = normal | reverse | alternate | alternate-reverse

normal:默认值正常顺序

reverse:动画按相反的方向播放

alternate:奇数动画按顺序播放,偶数动画按相反的方向播放

alternate-reverse:奇数动画按相反方向播放,偶数动画按顺序播放

single-animation-fill-mode

single-animation-fill-mode= none | forwards | backwards | both

none: 默认值,播放完后就当没有动画

forwards:播放完后元素处于最后一帧状态

backwards:播放前动画处于第一帧的状态

both:播放前处于第一帧,播放后处于最后一帧

single-animation-play-state

single-animation-play-state=running | paused

running:正常播放动画

paused:动画暂停

由zhuishao

github:https://github.com/zhuishao/

发表评论

电子邮件地址不会被公开。 必填项已用*标注