css3新屬性partD

對於頁面的交互效果，css3爲咱們提供了更多的動畫選擇：
過渡transition屬性：
語法：transition： CSS屬性，花費時間，效果曲線(默認ease)，延遲時間(默認0)

除了上述統一的寫法也能夠分開寫：
transition-property: width;（變型的css屬性）
transition-duration: 1s;（變形維持的時間）
transition-timing-function: linear;（動做的快慢曲線）
transition-delay: 2s;（動做延遲的時間）

transform屬性:
顧名思義的是元素的一種變形動做，這個屬性咱們結合過渡屬性來一塊兒看效果會更好，上代碼！

平臺不能截取gif圖片因此你們能夠本身試一下代碼
還有不少關於變形屬性的知識點，因爲篇幅緣由不是很能講完 傳送門

css3複雜動畫，animation標籤和keyframes，其實不少人都說這個點比較複雜難理解，可是我以爲在設計模式上是比較好理解的

這個動做體的意思是從紅色到黃色，執行這個動做體的時間是勻速進行5秒鐘
咱們還能夠經過這個來決定若干個元素在頁面上的走向

從頁面的左邊勻速移動到距離距離上邊框30px距離左邊框30px的距離 在學過js以後咱們也能夠經過js去作到同樣的效果，可是性能的消耗遠遠趕不上css3的動做具體緣由在咱們講到js動畫的時候會介紹。