过渡：transition
transtion：transition-property|transition-duration|transition-timing-function|transition-delay
transition-property：检索或设置对象中的参与过渡的属性，all | property | none；
all：所有可以进行过渡的css属性，none：不指定过渡的css属性，property：指定要进行过渡的css属性；
例如：-webkit-transition-property：border-color，background-color；
-webkit-transition-property：all；
transition-duration：持续时间，time；注意：时间以秒s为单位；
例如：-webkit-transition-duration：0.3s，0.7s；
transition-timing-function：过渡的动画类型，linear | ease（默认值）| ease-in | ease-out | ease-in-out | cubic-bezier（number，number，number，number）注意：number取值是[0，1]；
linear： 线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0) ；
ease： 平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0) ；
ease-in： 慢慢进入（由慢到快） 。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0) ；
ease-out：慢慢退出（由快到慢） 。等同于贝塞尔曲线(0, 0, 0.58, 1.0) ；
ease-in-out：由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0) ；
cubic-bezier(<number>, <number>, <number>, <number>)： 特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内；
例如：-webkit-transition-timing-function：ease-in；
transition-delay：延迟时间，time；同持续时间；
例如：-webkit-transition-delay：.9s； 表示过渡在0.9s之后发生；
复合写法例子：-webkit-transition：border-color .5s ease-in 2s，background-color .9s ease-out 3s；
拆分写法例子：transition-property：border-color，background-color；
transition-duration：.5s；
transition-timing-function：ease-in；
transition-delay：.1s；
动画：
动画方法（关键帧语法）：@keyframes
@keyframes IDENT {
from { Properties:Properties value; }
Percentage { Properties:Properties value; }
to { Properties:Properties value; }
}
首先，如果想要用动画必须先创建一个动画的具体方法，然后用animation去调用；
例如：@-webkit-keyframes 'wobble' {
0% { margin-left: 100px; background: green; }
40% { margin-left: 150px; background: orange; }
60% { margin-left: 75px; background: blue; }
100% { margin-left: 100px; background: red; }
}
观看视角：perspective：number；
例如：-webkit-perspective:0;
动画：animation设置对象所应用的动画效果；
animation：animation-name | animation-duration | animation-timing-function | animation- delay |animationiteration-count | animation-direction
animation-name：检索或设置对象所应用的动画名称；自己定义一个或多个，
animation-duration：检索或设置动画的持续时间，默认值0；
animation-timing-function：检索或设置动画的过渡类型即频率；同过渡的频率；
animation-delay：延迟时间，意思就是多久后执行这个动画；
animation-iteration-count：循环次数，默认值是1，infinite（无限次）|number；
animation-direction：检索或设置对象动画在循环中是否反向运动，normal | alternative（第一次运动结束后然后反向运动）；
例如：
.outer{
200px; height:200px;
position:relative;margin:100px auto;
-webkit-transform-style:preserve-3d;
-webkit-animation:roll 3s linear 1s infinite alternate;
}
/* animation */
@-webkit-keyframes roll{
from {-webkit-transform:rotatey(0deg);}
to {-webkit-transform:rotatey(360deg);}
}
注意：在补三维立体时，要加入-webkit-transform-style：preserve-3d；