属性
transition（4个属性）:
transition: width 5s ease 3s; /*简写*/
transition-property: width; /*过渡属性名*/
transition-duration: 5s; /*持续时间，默认为0*/
transition-timing-function: ease; /*速度*/
transition-delay: 3s; /*延迟*/
animation（7+个属性）
animation: myfirst 5s linear 2s infinite alternate backwards;/*简写*/
/*参数依次是：
name/duration/timing-function/delay/iteration-count/
direction （方向，重复多次时起作用，表示是否逆向播放，alternate逆向/
play-state（动画状态，running开启）/
fill-mode (动画结束时候的停留位置，backwards开始帧停留，forward结束帧停留)*/
/* infinite:无限次的 */
transform 又是什么
元素的一个移动属性，修改具体的参数，元素会做静态移动，也可以作为动画的变化属性；包含5个值：
- translate3d(x,y,z) 控制元素在页面上的三轴的位置；
- rotate(deg) 旋转角度；
- skew[x,y](deg) 倾斜度的；
- scale3d(x,y,z) 放大缩小，属性是比值；
- matrix3d，css矩阵。通过这个矩阵属性，涵盖了上面所有的属性值，数学性较强。
区别
- transition只能设置开始与结束2个关键帧的状态,多个关键帧可以使用 @keyframes 规则撰写动画
transition: width 2s ease, height 2s ease;
@keyframes addWidth{
from{
100px; /*一般的元素属性变化*/
transform: translate3d(-500%,0,0); /*transform控制的变化*/
}
to{
200px;
transform: none;
}
}
/*或者用0%到100%*/
@keyframes addWidth{
0%{
100px;
}
50%{
200px;
}
100%{
100px;
}}
- 触发条件：transition通常和hover等事件配合使用，由事件触发。animation则和gif动态图差不多，立即播放。
- 循环：animation可以设定循环次数
- 与JavaScript的交互：animation与js的交互不是很紧密。tranistion和js的结合更强大。js设定要变化的样式，transition负责动画效果。
详细分析见这篇文章：
兼容处理
/*CSS样式，animation一样*/
-webkit-transition: all .5s ease; /*--chrome,safari--*/
-moz-transition: all .5s ease; /*--firefox--*/
-ms-transition: all .5s ease; /*--IE--*/
-o-transition: all .5s ease; /*--opera--*/
transition: all .5s ease; /*--W3C--*/
/*写动画*/
@-webkit-keyframes demo{/*--chrome,safari--*/}
@-moz-keyframes demo{/*--firefox--*/}
@-ms-keyframes demo{/*--IE--*/}
@-o-keyframes demo{/*--opera--*/}
@keyframes demo{ /*--W3C--*/}