CSS animation 属性
animation: name
duration
timing-function
delay
iteration-count
direction
fill-mode
play-state
animation:动画名称 动画时间 运动方法 何时开始 播放次数 是否反方向 不播放时样式 运行状态;
下面是每个参数详细的解释及参数
animation-name
动画名称
为动画设定一个名称,需对应@keyframes
的名称
例:
div{
animation-name:myAnimation;
}
@keyframes myAnimation{
from {}
to {}
}
animation-duration
动画时间
为动画设定运动总时长
例:
animation-duration:5s;
设置时长为5秒(如果时长为0.5秒,则可以省略为.5s
)
animation-timing-function
运动方法
设置动画如何完成一个周期
例:
animation-timing-function: linear;
可用参数如下
animation-delay
何时开始
设置动画的延时时长
例:
animation-delay: 5s;
设置延时为5秒(5秒后才会触发)
animation-iteration-count
播放次数
设置动画触发时播放的次数
例:
animation-iteration-count: 5;
设置播放次数为5次(如果设置为infinite就是永远播放)
animation-direction
是否反方向
设置动画是否循环交替反向播放
例:
animation-direction: reverse;
可用参数如下
animation-fill-mode
不播放时样式
设置当动画不播放时,使用的样式
例:
animation-fill-mode: none;
设置不播放时无样式
可用参数如下
animation-play-state
运行状态
设置动画当前的播放是否为正在运行或已暂停
例:
animation-play-state: paused;
设置暂停动画
可用参数如下
animation的使用示例:
animation: go 3s linear 0s 1 normal;
@keyframes go {
0% {top:0px;}
50%{top:50px;}
100%{top:100px;}
}
暂无评论