css中關於transform、transition、animate的區別

寫動畫經常會用到這幾個屬性，他們之間有什么區別呢？

1.transform

　　每每演示transform屬性的，看起來好像都是帶動畫。這使得小部分直覺化思維的人（包括我）認為transform屬性是動畫屬性。而恰恰相反，transform屬性是靜態屬性。它其實只是一個靜態屬性，需要配合transition和animation才能展現出動畫效果。你可以把它看成是跟left、top等屬性一樣，只是一個靜態樣式而已。

它可以讓元素偏移、伸縮、變形、旋轉等。

具體的給設計師改變元素樣式用的屬性則有以下五個：

translate3d(x,y,z) 是用來控制元素的位置在頁面上的三軸的位置的；
rotate(deg)是用來控制元素旋轉角度的；
skew[x,y](deg) 這個屬性是用來制作傾斜度的，做過設計的人可能會知道，這個是用來在2d里面創建3d透視圖的時候必須的屬性；
scale3d(x,y,z) 用來放大縮小效果，屬性是比值；
matrix3d，css矩陣。通過這個矩陣屬性，涵蓋了上面所有的屬性值，但是個人覺得可讀性極差（全都是數字和單位，背起來有點模糊），目前沒有理由推薦使用。

2.transition

　　它屬性是一個簡單的動畫屬性，非常簡單非常容易用。可以說它是animation的簡化版本，是給普通做簡單網頁特效用的。

<div class="transform"></div> 

.transform{
        width:100px;
        height:100px;
        background: red;
        transition: all 1s ease-out;
    }
    .transform:hover{
        transform:rotate(360deg);
    }

3.Animation 

　　詳細講解請看我的另外一篇文章：http://www.cnblogs.com/freefish12/p/5510210.html

.context{
width:100px;
height:100px;
background: blue;
left:0;
position:absolute;
}

@keyframes move{
     from{
        transform: rotateY(180deg);
     }
     to{
         transform: rotateY(360deg);
     }
    }
    .context:hover{
        animation: move 0.5s infinite alternate;
    }

<div class="context">
        <div class="sub-context"></div>
   </div>