动画（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:持续时间; }
二、动画常用属性
@keyframes 规定动画。
animation 所有动画属性的简写属性，出了 animation-play-state 属性。
animation-name 规定@keyfrmanes 动画的名称 （必须的）。
animation-duration 规定动画完成一个周期所花费的秒或毫秒，默认是0 （必须的）。
animation-timing-function 规定动画的速度曲线，默认是"ease"。
速度曲线的值：
linear 动画从头到尾的速度是相同的。匀速
ease 默认值。低速到高速到低速
ease-in 动画低速开始
ease-out 动画低速结束
ease-in-out 动画低速开始和结束
steps() 指定了时间函数中的间隔数量（步长）
animation-delay 规定动画何时开始，默认是0。
animation-iteration-count 规定动画被播放的次数，默认是1，还有infinite （无限次）。
animation-direction 规定动画是否存在下一周期逆向播放，默认是“normal”，alternate 逆播放。
animation-play-state 规定动画是否正在运行或者暂停。默认是"running" 还是 "paused"。
animation-fill-mode 规定动画结束后状态，保持状态forwards or 回到起始backwards (默认状态)。
三、动画简写属性animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画开始或结束状态；
animation: myfirst 5s linear 2s infinite alternate; （动画myfirst 5秒内 匀速 2秒后开始 无限重复 反方向；）
博客只用于记录自己学习的东西，如有错误感谢留言斧正哦！