文章目录 一、基本用法1.关键帧@keyframes2.示例 二、常见错误及解决方案（1）@keyframes 不能实现突变的状态变化display替代方案1.占据空间：visiblity2.不想占据空间：绝对定位+visiblity3.消失前占据空间但是消失后不占据空间：timeout和visiblity （2）@keyframes会增添/覆盖属性
一、基本用法
CSS3 动画
动画：指定一组或多组成套的动作，按照指定时间，指定的方式自动完成。
h5中动画的运用效率要高于使用js来体现动画效果，因为动画是渲染式的。
@keyframes 通过在动画序列中定义关键帧的样式，来控制CSS动画序列中的步骤。
使用 @keyframes 可以创建动画。
在动画过程中，您可以更改CSS样式的设定多次。
指定的变化时发生时使用％，或关键字“from”和“to”，等价于0％到100％
0％是开头动画，100％是当动画完成。
如
@keyframes mycolor { 0% { background-color: red; } 30% { background-color: darkblue; } 50% { background-color: yellow; } 70% { background-color: darkblue; } 100% { background-color: red; } }1) animation-name：动画名称 指定了一个 @keyframes 动画，指定要使用哪一个关键帧。
2) animation-duration：动画持续时间 定义动画完成一个周期需要多少秒或毫秒。
3) animation-timing-function：动画的运动方式 指定动画将如何完成一个周期
4) animation-delay：动画的延迟时间 动画什么时候开始。
5) animation-iteration-count：动画循环次数 动画应该播放多少次，默认1
其值为：n（一个数字，指定播放多少次）、infinite（指定播放无限次）、
6)animation-fill-mode：结束状态 设置动画结束时盒子的状态
forwards 保持动画结束后的状态 backwards 动画结束后回到最初的状态7) animation-direction：动画的执行顺序 动画是否应该播放完后逆向交替循环（对设置了多次播放的动画有效）
其值为：normal（默认值，动画正常）、reverse 反向、alternate（动画交替循环逆向运动）
8) 简写方式
animation: 动画执行时间 延迟时间 执行关键帧名称 运动方式 运动次数 结束状态 动画执行顺序;
最简方式
animation: 动画执行时间 执行关键帧名称; 执行时间和延迟时间顺序不可调整
播放两次时长为5s的变色（红->黄->绿->h红）动画，结束。
<!DOCTYPE html><html><head><meta charset = "utf-8"><style>div { width: 200px;height: 200px;background: red;}@keyframes mycolor {0% { background-color: red; }30% { background-color: yellow; }60% { background-color: green; }100% { background-color: red; }}div:hover {animation-name: mycolor;animation-duration: 5s;animation-timing-function: linear;animation-iteration-count: 2;}</style></head><body> <div></div></body></html> 二、常见错误及解决方案 （1）@keyframes 不能实现突变的状态变化@keyframes 的原理是把样式的从一个状态，慢慢转变为另一个状态。
所以，如果不存在渐变的状态，是无法用@keyframes构成动画的，例如：
div { animation: appear 2s;}@keyframes appear { from { display:none; } to { display:block;}}display:none;是将div消失并且不占空间，display:block;则是将div展现存在并占据空间。
但是 display:none;和display:block;是突变的 ，所以@keyframes无法实现。
同理其他种类的突变属性也无法拥有@keyframes的动画效果，@keyframes 只存在于渐变属性当中，例如各种width, height, opacity等属性值为数值的属性。
display替代方案 1.占据空间：visiblity @keyframes appear {100% { opacity: 1;visibility: visible;}100% { opacity: 0;visibility: hidden;}} 2.不想占据空间：绝对定位+visiblity使用绝对定位使元素脱离文档流，搭配z-index控制层叠关系使它出现或者消失。
//自身css效果.animate { position: absolute; top: 0; left: 0; transition: 1s; opacity: 0; visibility: hidden; z-index: 0;}//出现时的效果.cur { opacity: 1; visibility: visible; z-index: 10;} 3.消失前占据空间但是消失后不占据空间：timeout和visiblity （2）@keyframes会增添/覆盖属性 /** div 在2s内下移200px*/div { position:absolute; top:0px; animation: move 2s;}@keyframes move { from { top:20px; } to { top:200px;}}此例中，div初始状态是top:0; 。
@keyframes首先用top:20px覆盖原属性（top:0;），然后再启动@keyframes功能。
结果：div突然瞬间下降20px，然后在2秒内下降至指定位置（top:200px;）