CSS3 Animation是一種使用CSS3創建動畫效果的方法。它提供了一些強大的動畫特性,比如改變元素的位置、大小和顏色等。要使用CSS3 Animation,我們需要使用關鍵幀動畫,從而定義動畫的開始、中間和結束狀態。關鍵幀動畫使用@keyframes規則定義,其中包含了每個關鍵幀元素的屬性變化。使用CSS3 Animation,你可以創建出各種各樣的動畫效果,使你的網頁更加生動有趣。
/* 定義一個簡單的動畫 */ @keyframes example { 0% {background-color: red;} 50% {background-color: yellow;} 100% {background-color: green;} } /* 應用動畫到一個div元素 */ div { animation-name: example; animation-duration: 4s; }
在上面的代碼中,我們定義了一個名為“example”的動畫,它包含了3個關鍵幀元素。當該動畫被應用于一個div元素時,它將在4秒內完成。該動畫將使div的背景色從紅色變為黃色,再從黃色變為綠色。
CSS3 Animation還提供了許多其他的動畫特性,如animation-delay、animation-timing-function和animation-iteration-count等。通過這些特性,我們可以進一步控制動畫的播放方式和效果。
/*使用animation-timing-function控制動畫效果*/ div { animation-name: example; animation-duration: 4s; animation-timing-function: linear; } /* 使用animation-iteration-count控制動畫循環次數 */ div { animation-name: example; animation-duration: 4s; animation-iteration-count: infinite; }
在以上例子中,我們通過animation-timing-function特性使用線性曲線來控制動畫效果。在另外一個例子中,我們使用animation-iteration-count特性定義了動畫將無限次循環播放。
總的來說,CSS3 Animation是一種非常有用的技術,它可以使網頁更加生動有趣。我們可以在MDN網站上找到更多有關CSS3 Animation的信息,以及各種各樣的動畫演示。