浅谈css3动画属性

css3动画通过animation来实现，css3动画不需要事件的触发，只需要调用关键帧即可。因此，制定好关键帧是实现动画的关键步骤。
制定关键帧
方法一：from内一般写入动画的初始状态，to写入动画的结束状态。
@keyframes 关键帧名字{
from{
}
to{
}
}
方法二：百分比形式表示动画的状态，0%表示动画初始状态，100%表示动画结束状态。
@keyframes 关键帧名字{
0%{
}
25%{
}
75%{
}
100%{
}
}
animation动画属性
1.animation-name 关键帧的名字
2.animation-duration 动画的持续时间
3.animation-timing-function 动画的类型（匀速运动 加速运动 贝塞尔曲线等等）
4.animation-delay 动画延迟
5.animation-iteration-count 动画运动次数（默认为一次，属性值infinite为无限循环）
6.animation-direction 动画运动方向（默认正向运动）
属性值：
（1）reverse 反向运动
（2）alternate 先正向后反向再正向后反向……（一直循环）
（3）alternate-reverse 先反向后正向
7.animation-play-state 动画正在运行还是暂停
属性值：
（1）pause 动画停止
（2）running 运动运动（默认值）
拓展：逐帧动画
animation-timing-function：step-start；
逐帧动画指的是帧与帧之间没有动画中间的过渡效果，每次都直接跳到下一帧开始的地方。
animation常用写法
一般动画都不用将每个属性单独写出来，可以用简写的方式，需要什么属性效果就写什么即可。例如，想要一个立方体在10秒内无限匀速循环，可以写成：
animation：关键帧名字 10s linear infinite;
案例展示：
实现红色小盒子在黄色盒子中无限循环运动，并且当鼠标滑过时红色盒子运动暂停。
1.代码展示：
（1）HTML代码

（2）css代码