CSS3屬性中關於制作動畫的三個屬性：Transform,Transition,Animation。

1、transform：描述了元素的靜態樣式，本身不會呈現動畫效果，可以對元素進行 旋轉rotate、扭曲skew、縮放scale和移動translate以及矩陣變形matrix。

div{
　　transform:scale(2);
}

transition和animation兩者都能實現動畫效果

transform常常配合transition和animation使用

2、transition樣式過渡，從一種效果逐漸改變為另一種效果

transition是一個合寫屬性

transition:transition-property transition-duration transition-timing-function transition-delay

從左到右分別是：css屬性、過渡效果花費時間、速度曲線、過渡開始的延遲時間

div{
    width：100px;
    height:100px;
    transition:transform 2s;
}
div：hover{
    transform:rotate(180deg);
}

transition通常和hover等事件配合使用，需要由事件來觸發過渡

3、animation動畫 由@keyframes來描述每一幀的樣式

div{
　　animation:myAnimation 5s infinite
}
@keyframes myAnimation {
　　0%{left:0;transform:rotate(0);}
　　100%{left:200px;transform:rotate(180deg);}
 

}

區別：

（1）transform僅描述元素的靜態樣式，常常配合transition和animation使用

（2）transition通常和hover等事件配合使用，animation是自發的，立即播放

（3）animation可設置循環次數

（4）animation可設置每一幀的樣式和時間，transition只能設置頭尾

（5）transition可與js配合使用，js設定要變化的樣式，transition負責動畫效果，如：

/*css:*/
div{
    width:100px;
    height:100px;
    transition:all 1s;
}
//js
divEle.onclick = function
 
(){
    divEle.style.width = "200px";
    divEle.style.height = "200px";
}

CSS動畫transform、transition和animation的區別