2D效果（transform） ：位移 缩放 旋转 斜切
deg:度数
位移：
translate (length)
Test:
-webkit-transform:translate( xx deg, xx deg )
缩放：
Scale:
-webkit-transform: scale(.5, .5);
旋转：
Rotate:
-webkit-transform: rotate( xx deg, xx deg)
斜切：
skew:
-webkit-transform: skew( xx deg, xx deg)
过渡动画（transition）：线性过渡 平滑过渡 快速平滑过渡 慢速平滑过渡 先快速后慢速平滑过渡
线性过渡：linear
平滑过渡：ease
快速平滑过渡：ease-in
慢速平滑过渡: ease-out
先快速后慢速平滑过渡: ease-in-out
-webkit-transtion: a需要过渡的属性(width/hight...) 时间(xxs) 过渡类型(linear/ease...) 延迟时间 infinite（无限循环）
例：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.out {
800px;
padding: 1px;
background-color: #999999;
}
.out div {
100px;
height: 100px;
margin: 25px;
background-color: #21bbca;
font-size: 12px;
text-align: center;
line-height: 100px;
}
.inner1 {
-webkit-transition: all 4s linear;
}
.inner2 {
-webkit-transition: all 4s ease;
}
.inner3 {
-webkit-transition: all 4s ease-in;
}
.inner4 {
-webkit-transition: all 4s ease-out;
}
.inner5 {
-webkit-transition: all 4s ease-in-out;
}
.out:hover div {
margin-left: 75%;
-webkit-transform: rotate(360deg);
border-radius: 50%;
}
</style>
</head>
<body>
<div class="out">
<div class="inner1">线性过渡</div>
<div class="inner2">平滑过渡</div>
<div class="inner3">由慢到快</div>
<div class="inner4">由快到慢</div>
<div class="inner5">由慢到快再到慢</div>
</div>
</body>
</html>