CSS3中我們通常通過transform(迅速的變化),transition(緩慢的變化),animation(關鍵幀動畫)，這三個屬性，實作簡單的動畫效果。
transform屬性實作的動畫效果是迅速的變化，他的文法是transform:rotate(ndeg) scale(n);[兩個變化的屬性之間用空格号隔離開]通常被放在僞類選擇器當中。在CSS當中，transform還可以被transition屬性引用，當tranform被transition引用時，它的作用相當于形狀的變化，利用下面代碼來闡述它們之間的關系：
#iphone{
background-image:url(images/iphone6.jpg);
transition:transform2s linear;
}
#iphone:active{
transform:scaleZ(2) translateX(-300px);
}
transition屬性不會被放在僞類選擇器當中，transition通常可以定義簡單的一次性動畫，它的作用相當于過渡，他的文法同animation相同。transition[animation]:要變化的屬性名（animation為動畫名） 持續時間 速度變化類型 [延遲時間];
animation屬性可以實作關鍵幀動畫，相對transition它可以控制物體的連續變化變化狀态，要比transition靈活的多。但，相比于H5動畫它還是有很多的局限性，①因為H5動畫必須要通過javascript配合實作動畫效果，是以H5動畫可以實作更多的互動效果，如：事件的綁定效果。②另外CSS3要實作多步驟的動畫必須定義多個坐标值，而H5可以通過javascript一些資料的算法實作多步驟的動畫效果。③H5中的canvas在IE8當中不允許引入圖檔，而存在相容性問題，并且舊版本的IE8及以下的版本的浏覽器都不支援canvas。另外animation必須要定義關鍵幀。定義關鍵幀的文法如：
@keyframes 動畫名{
from{開始樣式}
n%{當動畫進度播放到n%時的樣式}
...
to{結束樣式}
} 浏覽器相容性： @keyframes animation Firefox IE（不用加）
@-webkit-keyframes -webkit-animation Chrome Safari
@-o-keyframes -o-animation Opera animation同樣不會被放在僞類選擇器當中，通過上述我們可以知道這三個當做屬性時候的用法，都需要觸發僞類選擇器，而CSS3實作動畫的效果，可以完全不用靠javascript。
在分析H5當中的canvas動畫和svg動畫時，svg實作的動畫效果和canvas實作動畫效果時調用的方法基本上是一模一樣，由于svg不能引入圖檔，導緻了它做動畫的局限性。