CSS3動(dòng)畫(huà)通過(guò)transition、transform、animation等屬性來(lái)實(shí)現(xiàn)各種動(dòng)態(tài)效果,其中animation屬性可以實(shí)現(xiàn)連續(xù)的動(dòng)畫(huà)效果。但是,有時(shí)候我們希望動(dòng)畫(huà)播放完畢后不要直接結(jié)束,而是繼續(xù)停留在結(jié)束狀態(tài),為此,可以使用CSS3動(dòng)畫(huà)的一些技巧。
/* 定義關(guān)鍵幀 */ @keyframes stay { 0% { transform: scale(1); } 50% { transform: scale(2); } 100% { transform: scale(1); } } /* 延長(zhǎng)持續(xù)時(shí)間 */ div { animation: stay 4s linear 2; /* 播放2次 */ } /* 縮短間隔時(shí)間 */ div { animation: stay 2s steps(1,end) infinite; /* 切換0.5秒一次 */ } /* 通過(guò)backwards實(shí)現(xiàn)停留 */ div { animation: stay 2s forwards; /* 停留在結(jié)束狀態(tài) */ }
以上代碼中,我們首先定義了一個(gè)名為stay的關(guān)鍵幀動(dòng)畫(huà),其中0%表示起始狀態(tài),100%表示結(jié)束狀態(tài),50%表示其它狀態(tài)。然后,我們可以通過(guò)改變動(dòng)畫(huà)的持續(xù)時(shí)間、播放次數(shù)和間隔時(shí)間等屬性來(lái)實(shí)現(xiàn)連續(xù)的動(dòng)畫(huà)效果。另外,我們還可以使用animation的forwards值來(lái)實(shí)現(xiàn)停留在結(jié)束狀態(tài)。
總之,CSS3動(dòng)畫(huà)可以實(shí)現(xiàn)連續(xù)而又流暢的動(dòng)態(tài)效果,而以上技巧則可以讓動(dòng)畫(huà)播完不結(jié)束,從而更好地搭配我們的網(wǎng)頁(yè)設(shè)計(jì)。