CSS3是一種CSS的升級版本,增加了很多新的特性和能力,其中三種最受歡迎的動畫形式是:
.transition { transition: all 1s; }
第一種是通過過渡(transition)來實現動畫效果。它可以在不同狀態之間平滑地進行過渡,比如hover狀態下的按鈕樣式變化。我們可以使用transition屬性來為元素的屬性添加動畫效果。在上述代碼中,all表示所有可以過渡的屬性,1s表示一秒鐘的時間。
.animation { animation-name: myanimation; animation-duration: 2s; } @keyframes myanimation { from {background-color: red;} to {background-color: yellow;} }
第二種是使用動畫(animation)來實現動畫效果。它允許我們創建一個自定義的動畫序列,在關鍵幀(keyframes)中指定每個階段要改變的樣式。我們可以使用animation-name和animation-duration屬性來控制動畫的名稱和持續時間,在@keyframes規則中定義動畫的關鍵幀。
.transform { transform: rotate(360deg); transition: transform 1s; }
第三種是使用變換(transform)來實現動畫效果。它可以讓元素進行旋轉、縮放、傾斜和位移等操作,通過改變元素的外觀來產生動畫效果。我們可以使用transform屬性來控制元素進行的變換操作,在上述代碼中,rotate表示旋轉操作,360deg表示旋轉的角度。
下一篇css3 三維 變形