CSS animation 属性

animation属性是设置动画的一个简写属性。

其语法为:

animation: name duration timing-function delay iteration-count direction;

  name:就是你定义的动画的名称。

       duration:代表的是你的动画完成要花费的时间。其默认值为0。

       timing-func:规定动画的速度曲线。默认是动画以低速开始,然后加快,在结束前变慢。

效果
ease 默认是动画以低速开始,然后加快,在结束前变慢
linear 动画从头到尾的速度是相同的。
ease-in 动画以低速开始。
ease-out 动画以低速结束。
ease-in-out 动画以低速开始和结束。

 

       delay:规定在几秒之后开始动画。其默认值为0。

       iteration-count:设置动画播放的次数。其默认值为1。

效果
infinite 规定动画应该无限次播放。
n 定义动画播放次数的数值

 

       direction:设置是否应该轮流反向播放动画。

效果
normal 默认动画应该正常播放
alternate 动画应该轮流反向播放
上一篇:react 组件中的样式(css)


下一篇:CSS 基础 选择器的使用汇总