CSS3动画，6种常见错误

本篇文章总结在CSS3动画上遇到的问题，6种常见错误，以及解决方案。愿每一位前端开发者在后来都能躲过这些坑！

常见错误：Animation篇

首先先来复习一下animation的有哪些属性：

属性名	默认	作用
animation-name	none	keyframe 的名字
animation-duration	0s	运行总时长
animation-timing-function	ease	运行的速度变化，总不可能总是匀速吧
animation-delay	0s	延迟时间
animation-iteration-count	1	重复的次数，也可以是无限的infinite
animation-direction	normal	动画执行方向，可以正着来，也可以反着来reverse
animation-fill-mode	none	important 动画结束之后和开始之前的状态，是不是动画未开始的时候就是默认样式，结束的时候又返回默认样式。
animation-play-state	running	动画的状态，注意如果说这个时候动画运行结束了，状态也是running，因为这个running不是表示动画正在运行，而是一种状态，有没有被强行暂停。

常见错误一：动画做完就disappear了！code play~

这个应该是animation中的基础题，所以放在了第一位。

这个问题的解决方案就是animation-fill-mode这个属性没有设置或者设置错误。这个属性从专业的角度来说是动画的一个延续，就是0~100%的keyframe走完之后和开始之前的归宿。

简单地来说就是动画结束之后或者开始之前，当前元素的状态是否保留动画最后一帧的状态或者未开始之前使用第一帧的样式。这个属性默认是不保留状态，也就是说开始之前是原始状态，开始之后才开始转换样式，结束之后会立刻切换至原始状态