这两天在优化页面，准备做一些动态效果的demo，发现css3中的动画、渐变和改变有一些容易混淆的问题，所以整理了下css3的相关内容。
css3的动画效果，是使元素从一种状态变化到另外一种状态。首先定义动画的规则，比如是否重复播放，播放的速度、时间，是否逆向播放，当前是否播放，播放前是否有延迟，播放时间之外的状态这些动画规则。这些动画规则存在于目标元素上。然后使用@keyframes来定义动画，也就是起始状态和终止状态之间的具体样式。通常使用0% -100%之间的数字来展示，也可以使用from、to来表示。注意目标元素需要设置animation-name来绑定对应的动画。
过程可以这样解释，你看电视，需要调整电视的一些声音大小、屏幕尺寸的设置，这些设置和你在电视中播放的内容是无必然联系的。这些设置就是动画的规则。而电视中的内容就是我们的动画的内容。比如在电视中播放动画片。“绑定”这一行为就可以理解为将动画片的内容放入某台电视内。
css3中还有transform属性，用于对元素进行旋转（rotate）、缩放（scale）、移动（translate）或倾斜（skew），但是这些属性只是定义某一个状态。比如旋转，定义旋转30度后，元素的状态就是旋转30度后，此处是和动画的区别（展示过程+结果与只展示结果）。动画可以使用transform的某些属性作为状态，然后逐渐过渡到相应比例的状态，形成动画。
css3中另外一个属性就是transition。这个属性只需要在目标元素的css设置中进行设置就可以。比如设置延迟时间、设置要变化的属性，变化的时间，鼠标放上后属性执行。这个渐变也是可以展示一个变化的过程。但是目前这个过程只能是在鼠标放上之后才能展示这个渐变效果。而动画是可以随时通过设置running来控制是否运行的。
综上，个人认为，动画在3个方法里，最适合在做某些改变时展示动画效果；渐变适合做一些鼠标悬停时的效果展示；而改变则适合目标元素的状态一直为改变的。