一、容易混淆的概念
css中有几个"长相"类似的动画属性。分别是
animation（动画）、transition（过渡）、transform（变形）、translate（移动）
CSS3中的transform(变形)属性用于内联元素和块级元素，可以旋转、扭曲、缩放、移动元素，它的属性值有以下五个：旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix；
transform(变形)是CSS3中的元素的属性，而translate（移动）只是transform的一个属性值
animation（动画）、transition（过渡）是css3中的两种动画属性。animation强调流程与控制，对元素的一个或多个属性的变化进行控制，可以有多个关键帧（animation 和@ keyframes结合使用）；
transition强调过渡，是元素的一个或多个属性发生变化时产生的过渡效果，同一个元素通过两个不同的途径获取样式，而第二个途径当某种改变发生（例如hover）时才能获取样式，这样就会产生过渡动画。可以认为它有两个关键帧。当元素无任何操作直接就有动画时，一般使用animation。当元素需要某些事件触发才有动画时，一般用transition。
transition示例：
<style>
2 #box1 {
3 height: 100px;
4 width: 100px;
5 background: green;
6 transition: background 2s ease,transform 2s ease-in 1s;
7 }
8 #box1:hover{transform:rotate(180deg) scale(.5,.5);background:red;}
9 </style>
10
11 <body>
12 <div id="box1">BOX1</div>
13 </body>当鼠标移动到box1上时，背景色由绿变红，并且旋转180度，缩小为0.5倍
二、transition
1.语法
transition是一个复合属性，可设置四个过渡属性，简写方式如下：
transition{ transition-property transition-duration transition-timing-function transition-delay}
transition-property：是用来指定当元素其中一个属性改变时执行transition效果，值有none（没有属性改变）、all（默认值，所有属性改变），indent（某个属性名，一条transition规则，只能定义
一个属性的变化，不能涉及多个属性，如果要设置多个属性时，需分别设置，中间以逗号隔开）【当其值为none时，transition马上停止执行，当指定为all时，则元素产生任何属性值变化时都将执行transition效
果】。
transition-duration ：过渡时间，是用来指定元素转换过程的持续时间，单位为s（秒）或ms（毫秒）
transition-timing-function：时间函数，允许你根据时间的推进去改变属性值的变换速率，值ease（逐渐变慢）、linear（匀速）、ease-in(加速) 、ease-out（减速）、ease-in-out：（加速然后减速）、cubic-bezier：（该值允许你去自定义一个时间曲线）
transition-delay：延迟，指定一个动画开始执行的时间，也就是说当改变元素属性值后多长时间开始执行transition效果，单位为s（秒）或ms（毫秒）
2.触发方式
伪类触发：:hover : focus :checked :active
js触发：toggleClass
3、以下情况下，属性值改变不能产生过渡效果
-
background-image，如url(a.jpg)到url(b.jpg)（与浏览器支持相关，有的浏览器不支持）等
-
float浮动元素
-
height或width使用auto值
-
display属性在none和其他值（block、inline-block、inline）之间变换
-
position在stativ和absolute之间变换
三、animation
1.animation示例
<style>
2 .box{height:100px;width:100px;border:15px solid black;
3 animation: changebox 10s ease-in-out 3 alternate paused;
4 }
5
8 @keyframes changebox {
9 10% { background:red; }
10 50% { width:80px; }
11 70% { border:15px solid yellow; }
12 100% { width:180px; height:180px; }
13 }
14 </style>
15
16 <body>
17 <div class="box"></div>
18 </body>设置方法如上，其中0%和100%还可以使用关键词from和to来代表，大括号中设置不同时间段的样式规则。
如上示例中，animation中设置animation-duration的值是10s，并通过animation-name为changebox引入@keyframes changebox中的样式，表示在10秒内执行动画，动画执行过程：
0-1秒背景色变红，0-5秒宽度变为80px，0-7秒边框由原始设定的无变为border:15px solid yellow，0-10秒高度变为180px，5-10秒宽度由80px变为180px
特别注意的是：每一个百分号后面的样式变化都是从0s开始的，除非有两个百分比设置了同一个样式的变化（上方的例子，50% { width:80px; } 100%{width:150px;}，那么宽度的整体情况会是0~5s中宽度由原始值变为80px；5~10s间，宽度由80px变为180px
2、animation语法
设置好了关键帧，就可以设置animation属性了，animation也是一个符合属性，可以简写，语法如下：
animation{ animation-name animation-duration animatino-timing-function animation-delay animation-iteration-count animation-direction animtion-play-state animation-fill-mode}
animation-name：用来调用@keyframes定义好的动画，与@keyframes定义的动画名称一致
animation-duration ：指定元素播放动画所持续的时间
animatino-timing-function ： 和transition中的transition-timing-function 中的值一样。根据上面@keframes中分析的animation中可能存在多个小动画，因此这里的值设置是针对每一个小动画所在时间范围内的属性变换速率。
animation-delay：定义在浏览器开始执行动画之前等待的时间，这里是指整个animation执行之前的等待时间，而不是上面说的多个小动画
animation-iteration-count：定义动画的播放次数，其通常为整数，默认是1,；取值为infinite，动画将无限次的播放。
animation-direction：主要用来设置动画播放方向，其主要有两个值：normal 默认值，如果设置为normal时，动画每次循环都是向前（即按顺序）播放alternate（轮流），动画播放在第偶数次向前播放，第奇数次向反方向播放（animation-iteration-count取值大于1时设置有效）
animtion-play-state：属性是用来控制元素动画的播放状态。其主要有两个值：running，可以通过该值将暂停的动画重新播放，这里的重新播放不是从元素动画的开始播放，而是从暂停的那个位置开始播放。paused，暂停播放
animation-fill-mod： 默认情况下，动画结束后，元素的样式将回到起始状态，animation-fill-mode属性可以控制动画结束后元素的样式。主要具有四个属性值：
none（默认，回到动画没开始时的状态。）forwards（动画结束后动画停留在结束状态）backwords（动画回到第一帧的状态）both（根据animation-direction轮流应用forwards和backwards规则）。