CSS3可以通過逐幀動畫來實現(xiàn)流暢的動態(tài)效果,這種效果可以逐一顯示不同幀的圖片或者不同的樣式,感覺上就像是在播放一些連續(xù)的幀畫面。
在CSS中,我們可以通過設置關鍵幀和屬性來實現(xiàn)逐幀動畫效果。關鍵幀指動畫開始和結束的時間點,可以用百分比或者關鍵字(如from和to)來表示。屬性則是動畫在每個關鍵幀所需要改變的樣式。
.box{ animation: mymove 5s; } @keyframes mymove{ from {left: 0px;} to {left: 200px;} }
上面的代碼創(chuàng)建了一個名為mymove的關鍵幀,并在.box類中應用了這個動畫。從0%到100%的時間內(nèi),動畫會使.box類的left值從0像素變成200像素。
你也可以使用多個關鍵幀來定義一個逐幀動畫,以便在動畫中添加更多的樣式變化。
.box{ animation: mymove 5s; } @keyframes mymove{ 0% {left: 0px; top: 0px;} 50% {left: 200px; top: 0px;} 100% {left: 200px; top: 200px;} }
上面的代碼定義了三個關鍵幀,分別在0%,50%,100%的時間內(nèi),改變.box類的left和top屬性值。這樣就可以在動畫中讓.box類的位置在x軸和y軸上移動。
逐幀動畫也可以使用animation-play-state屬性來實現(xiàn)暫停或繼續(xù)動畫的播放,例如:
.box{ animation: mymove 5s; animation-play-state: paused; } .box:hover{ animation-play-state: running; }
上面的代碼定義了一個.box類的動畫播放狀態(tài)為暫停,當鼠標懸停在.box類上方時,動畫會重新開始播放。
總之,在CSS中設置逐幀動畫可以讓你創(chuàng)建出很多炫酷的動態(tài)效果,你只需要學習一些CSS屬性和關鍵幀的用法就可以輕松愉快地開始創(chuàng)作啦!