CSS animation 属性

柔情只为你懂 2023-06-19 11:12 93阅读 0赞

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;`  
可用参数如下  
![timing-function][]  
`animation-delay` **何时开始**  
设置动画的延时时长  
例：  
`animation-delay: 5s;` 设置延时为5秒（5秒后才会触发）

`animation-iteration-count` **播放次数**  
设置动画触发时播放的次数  
例：  
`animation-iteration-count: 5;` 设置播放次数为5次（如果设置为infinite就是永远播放）

`animation-direction` **是否反方向**  
设置动画是否循环交替反向播放  
例：  
`animation-direction: reverse;`  
可用参数如下  
![direction][]  
`animation-fill-mode` **不播放时样式**  
设置当动画不播放时，使用的样式  
例：  
`animation-fill-mode: none;` 设置不播放时无样式  
可用参数如下  
![fill-mode][]  
`animation-play-state` **运行状态**  
设置动画当前的播放是否为正在运行或已暂停  
例：  
`animation-play-state: paused;` 设置暂停动画  
可用参数如下  
![play-state][]

animation的使用示例：

animation: go 3s linear 0s 1 normal;
    @keyframes go { 
    　　0% { top:0px;}
    　　50%{ top:50px;}
    　　100%{ top:100px;}
    }

[timing-function]: https://img-blog.csdnimg.cn/20191209160012314.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b3FpbmcyMDE2,size_16,color_FFFFFF,t_70
[direction]: https://img-blog.csdnimg.cn/2019120916103537.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b3FpbmcyMDE2,size_16,color_FFFFFF,t_70
[fill-mode]: https://img-blog.csdnimg.cn/20191209161440293.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b3FpbmcyMDE2,size_16,color_FFFFFF,t_70
[play-state]: https://img-blog.csdnimg.cn/2019120916170253.png