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）等等。
汽车只要有这些东西才能更好地运动起来，所以我们的动画也是这样，这里说的很简单，只是笼统介绍了着三个属性，不太详细，只是我个人的一点点理解，不足
之处，还请见谅。