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;}
}

来源：CSDN

作者：guoqing2016

链接：https://blog.csdn.net/guoqing2016/article/details/103418363

标签

animation

动画

css