css中amimation 的用法

css3 animation属性

   animation比较类似于 flash 中的逐帧动画，逐帧动画就像电影的播放一样，可以让很多其它CSS属性产生动画效果，比如color, background-color, height， width等。当然，你需要为每个动画定义@keyframes CSS规则，animation需要调用这些@keyframes产生动画效果。在 CSS3 中是由属性keyframes来完成逐帧动画的。

 

animation合写语法:

 

@keyframes语法格式:

 

 

(其中form,to与0%，100%的效果相同，两指中间可以插入例如10%，25%，50%等 .   animationName  就是我们为keyframes取得名字,会应用到后面的animation选择中 .)

 

 

animation 属性可以设置的六个动画分写属性分别为：

注：需始终设置 animation-duration 属性，否则当时长为 0时，就不会播放动画了。

 

说明:
1.动画的名称是由Keyframes创建的动画名，这里必须和创建的动画名保持一致。如果不一致,将不能实现任何动画效果

2、animation-duration
animation-duration: time (s) 
animation-duration是指定元素播放动画所持续的时间，取值为数值，单位为秒(s)，其默认值为“0”。

3、animation-timing-function
animation-timing-function:ease(缓冲) || ease-in(加速) || ease-out(减速) || ease-in-out(先加速后减速) || linear(匀速) || cubic-bezier(自定义一个时间曲线)
animation-timing-function是用来指定动画的播放方式，具有以下六种变换方式：ease(缓冲);ease-in(加速);ease-out(减速);ease-in-out(先加速后减速);linear(匀速);cubic-bezier(自定义一个时间曲线)。

4、animation-delay
animation-delay: time(s)
animation-delay:是用来指定元素动画开始时间。取值为数值，单位为秒(s)，其默认值为“0”。这个属性和animation-duration使用方法是一样的。

5、animation-iteration-count
animation-iteration-count:infinite || number
animation-iteration-count是指定元素播放动画的循环次数，其取值为数字，默认值为“1”或者infinite(无限次数循环)。

6、animation-direction
animation-direction: normal || alternate
animation-direction是指定元素动画播放的方向，如果是normal，那么动画的每次循环都是向前播放;如果是alternate，那么动画播放在第偶数次向前播放，第奇数次向反方向播放。

 

标签：动画,ease,keyframes,用法,animation,amimation,播放,css,属性
来源： https://www.cnblogs.com/lsqxx/p/15615655.html