快速理解制作动画的三个属性

　　css3中制作动画的三个属性：transform，transition，animation。

　　本文初步介绍这三个属性的使用条件和使用方法。

　　1. 首先，我们先了解这几个单词的中文解释：

　　　　　　　　　　　　　　　　　　　　　transform：变换；转换；

　　　　　　　　　　　　　　　　　　　　　transition：过渡；转变；

　　　　　　　　　　　　　　　　　　　　　animation：动画；动画模块；

　　2.那这些属性到底怎样对元素产生作用呢？

　　我们看先transform。

　　transform属性包括：rotate（）旋转 /   translate（）水平位移/  skew（）倾斜/  scale（）缩放

　　transform就是改变元素在页面中的位置或者状态。

　　如果我们把动画当做运动的汽车，transform就好比汽车的方向盘，通过这个方向盘，我可以控制四个轮胎（transform的属性值），来达到想要的目的地。

　　这里我们要将另外两个属性一起说，因为它俩的属性有些相似。

　　transition属性包括：transition-property：检索或设置对象中的参与过渡的属性。

　　　　　　　　　　：transition-duration：检索或设置过滤的持续时间。

　　　　　　　　　　：transition-delay：检索或设置延迟过渡的时间。

　　　　　　　　　　：transition-timing-function：检索或设置过渡的动画。

 

　　animation包括      ：animation-name：定义动画名称。

　　　　　　　　       ：~ -duration :持续时间

　　　　　　　　       ：~-timing-function:过渡类型

　　　　　　　　       ：~-dely:延迟时间

　　　　　　　　       ：~iteration-count:循环次数

　　　　　　　　       ：~-direction:是否反向

　　　　　　　　       ：~-play-state:动画的状态

　　animation还有个重要的属性：keyframes，它的意思是“关键帧”，大家都知道电影是一帧一个画面，许多帧连接在一起，就形成了动态的画面。

　　@keyframes name { from { 初始状态属性 } to { 结束状态属性 }} 或者 @keyframes name { 0% { 初始 } 100% { 结束 }}

　　keyframes就是开启animation的钥匙，设置了每个阶段要动作的元素的状态。

　　transition和animation的相同点都是随着时间改变元素的属性值。而不同点是transition要有一个事件的触发，而animation则不需要，它需要明确的动画属性。

　　还是比作运动的汽车，我们把transition当做汽车的手动档，只有你给它一个动作，才能改变汽车的状态。而animation就好像汽车的导航，给了目的地（-name）

　，它给汽车规划道路，预算到达的时间（-duration），速度多少适合（-timing-function）等等。

　　汽车只要有这些东西才能更好地运动起来，所以我们的动画也是这样，这里说的很简单，只是笼统介绍了着三个属性，不太详细，只是我个人的一点点理解，不足

　　之处，还请见谅。