1，transition属性
个人非常习惯用transition过度属性，简单易用。大家称他为animation简化版本。
例如：
.contain{
width: 392px;
position: relative;
bottom: -20px;
opacity: 0;}
.contain.on{
bottom: 0;
opacity: 1;
transition:all 500ms ease-out 2s;
-webkit-animation:all 500ms ease-out 2s;
-moz-animation:all 500ms ease-out 2s;
-ms-animation:all 500ms ease-out 2s;
-o-animation:all 500ms ease-out 2s;}
当符合某种条件时为contain添加.on类，即可有延时2s 历时500ms的“由下往上 由透明变为实体”的动画效果。
语法：
transition: property duration timing-function delay;
但是需要注意的是：火狐浏览器对于transition最后一个数值要求很严格，如果延时为0时我们往往会忽略后面的S，则火狐上无效果！
2，animation属性
animation属性比transition属性多包含keyframes规则显式控制当前帧的属性，因而更加灵活。
举例：
@keyframes guideDown{
0%,100%{background-position: 0 -352px;}
50%{background-position: 0 -360px;}
}
@-webkit-keyframes guideDown{
0%,100%{background-position: 0 -352px;}
50%{background-position: 0 -360px;}
}
@-ms-keyframes guideDown{
0%,100%{background-position: 0 -352px;}
50%{background-position: 0 -360px;}
}
@-moz-keyframes guideDown{
0%,100%{background-position: 0 -352px;}
50%{background-position: 0 -360px;}
}
.moveDiv{
animation:guideDown 2s infinite;
-webkit-animation:guideDown 2s infinite;
-moz-animation:guideDown 2s infinite;
-ms-animation:guideDown 2s infinite;
-o-animation:guideDown 2s infinite;
}
infinite是指无限次循环，如果只执行一次，只需限定animation-fill-mode:forwards即可。
语法：
animation: name duration timing-function delay iteration-count direction;
3，transform属性
transform看似是动画属性，其实是静态属性，写到style里只会直接显式，无变化过程。其用途主要用于特殊变形，定义多种静态样式，然后通过transition和animation制定如何改变属性值，进而实现动画效果。
其改变属性样式的属性有：translate3d（3d位置），totate（旋转），skew（倾斜度），scale（放大缩小），matrix（css矩阵）。
语法：
transform: none|transform-functions;