CSS中的animate是一種非常有用的屬性,可以讓我們創建動態的網頁效果,如懸浮導航、滾動圖像等等。animate屬性可以結合keyframes使用,使網頁元素能夠在特定時間間隔內經歷一系列動畫效果。
使用animate屬性需要聲明兩個屬性:動畫名稱和動畫時間。
.example { animation-name: move; /* 動畫名稱 */ animation-duration: 2s; /* 動畫時間 */ }
接下來,我們需要定義這個動畫效果的具體細節,可以使用keyframes屬性。可以將動畫效果分成許多小的時間段,每一個時間段包含元素應該有的樣式。這些時間段被稱為關鍵幀。在每一個關鍵幀中,您可以指定元素的各種屬性。
@keyframes move { 0% {transform: translateX(0)} 50% {transform: translateX(50px)} 100% {transform: translateX(100px)} }
在上述代碼中,我們定義了一個名為“move”的關鍵幀。它指定了元素應該在0%、50%、100%的時候應該具有的樣式。
在HTML中,我們可以使用以下代碼將CSS動畫應用到元素上:
這樣,我們的CSS動畫就完成了!您可以根據需要重復應用動畫,或者通過css指定其他屬性,例如動畫的延遲、播放狀態、動畫次數等等。