CSS3 动画

动画（animation）是css3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或者一组动画，常用来实现复杂的动画效果。相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。

一、动画的基本使用

　　1.定义动画

　　　　用keyframes 定义动画（类似定义类选择器）

　　　　@keyframes 动画名称{ 0%{width:100px;} 100%{width:200px;} }

　　　　动画序列：

　　　　　　0% 是动画的开始，100%是动画的完成，这样的规则就是动画序列。

　　　　　　在@keyframes 中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果。

　　　　　　动画是使元素从一种样式逐渐变化为另一种样式的效果。可以改变任意多的样式，任意多的次数。

　　　　　　使用百分比来规定变化发生的时间，或用关键词“form” 和 “to” ，等同于0% 和 100%。

　　2.调用动画

　　　　使用定义的动画：div{width:100px;height:100px; animation-name:动画名称; animation-duration:持续时间; }

二、动画常用属性

1. @keyframes 规定动画。
2. animation 所有动画属性的简写属性，出了 animation-play-state 属性。
3. animation-name 规定@keyfrmanes 动画的名称 （必须的）。
4. animation-duration 规定动画完成一个周期所花费的秒或毫秒，默认是0 （必须的）。
5. animation-timing-function 规定动画的速度曲线，默认是"ease"。
   • 速度曲线的值：
     • linear 动画从头到尾的速度是相同的。匀速
     • ease 默认值。低速到高速到低速
     • ease-in 动画低速开始
     • ease-out 动画低速结束
     • ease-in-out 动画低速开始和结束
     • steps() 指定了时间函数中的间隔数量（步长）
6. animation-delay 规定动画何时开始，默认是0。
7. animation-iteration-count 规定动画被播放的次数，默认是1，还有infinite （无限次）。
8. animation-direction 规定动画是否存在下一周期逆向播放，默认是“normal”，alternate 逆播放。
9. animation-play-state 规定动画是否正在运行或者暂停。默认是"running" 还是 "paused"。
10. animation-fill-mode 规定动画结束后状态，保持状态forwards or 回到起始backwards (默认状态)。

三、动画简写属性

　　animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画开始或结束状态；

　　animation: myfirst 5s linear 2s infinite alternate; （动画myfirst 5秒内 匀速 2秒后开始 无限重复 反方向；）

博客只用于记录自己学习的东西，如有错误感谢留言斧正哦！

原文地址：https://www.cnblogs.com/ruiannan/p/11986525.html