CSS3 動(dòng)畫(huà)簡(jiǎn)介

    animation的意思就是“動(dòng)畫(huà)"。需要注意的是，animation和之前所學(xué)過(guò)的canvas動(dòng)畫(huà)不同。animation是一個(gè)CSS屬性，只能作用于頁(yè)面中已經(jīng)存在的元素，而不能像canvas那樣可以在畫(huà)布中呈現(xiàn)動(dòng)畫(huà)效果。

    想使用animation動(dòng)畫(huà)，需要先了解@keyframes。它的意思是“關(guān)鍵幀”，在Hash中創(chuàng)建動(dòng)畫(huà)其實(shí)就是創(chuàng)建關(guān)鍵幀，CSS3中的?keyframes類(lèi)似于Flash中的關(guān)撻幀。

    下面是官方對(duì)CSS3動(dòng)畫(huà)的解釋。

    動(dòng)畫(huà)是使元素從一種樣式逐漸變化為另一種樣式的效果。可以改變?yōu)槿我鈽邮?，可以進(jìn)行任意次數(shù)的改變。請(qǐng)用百分比來(lái)規(guī)定變化發(fā)生的時(shí)間，或用關(guān)鍵詞from和to,等同于0%和100%。0%是動(dòng)畫(huà)的開(kāi)始，100%是動(dòng)畫(huà)的完成。為了得到最佳的瀏覽器支持，應(yīng)該始終定義0%和100%選擇器。