CSS 动画

动画是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。
相比于过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。
下面给大家带来关于CSS动画的基本语法

动画的基本使用：
1.先定义动画
使用keyframes定义动画（类似定义类选择题）
@keyframes 动画名称 {
0% {
width:100px;
}
100% {
width:100px;
}
}
0%是动画的开始，100%是动画的完成，这样的规则就是动画序列，可以做多个状态的变化，百分比要是整数(from 和 to等价于0%和100%)
在@keyframes中规定某项CSS样式，就能创建有当前样式逐渐改变为新样式的动画效果
动画是使元素从一种样式账户间变化为另一种样式的效果，可以改变任意多的样式任意多的次数
要使用百分比来规定变化发生的时间，或用关键词"form"和"to"，等同于0%和100%

2.再调用动画
div {
width: ;
height: ;
background-color:aqua;
margin: ;
animation-name:动画名称
animation-duration:持续时间
}

动画常用属性：
@keyframes ：规定动画
animation ：所有动画属性的简写属性
animation-name ：规定动画名称
animation-duration ：规定动画完成一个周期花费的时间
animation-timing-function ：规定动画的速度曲线 默认为ease
animation-dalay ：规定动画何时开始
animation-iteration-count ：规定动画的播放次数 默认是1，还有infinite
animation-direction ：规定动画是否在下一周期逆向播放 默认是 normal alternate逆播放
animation-play-state ：规定动画是否运行或暂停 默认是running 还有paused
animation-fill-mode ：规定动画结束后状态，保持forWords回到起始backWord
动画简写属性：
animation:动画名称 持续时间 运动曲线 播放次数 是否反方向 起始或结束状态
简写属性不包括animation-play-state
速度曲线细节：
linear :匀速
ease ：默认值 动画以低速开始 然后加快 结束前变慢
ease-in ：动画以低速开始
ease-out ：动画以低速结束
ease-in-out ：动画以低速开始和结束
steps() ：指定了时间函数中的间隔数量