css3动画

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>