CSS動畫是一種通過改變HTML元素的屬性值來創建動態效果的技術。CSS動畫減少了JavaScript代碼需求,提高了性能,提供了更好的可維護性。例如,你可以使用CSS動畫來制作文本閃爍、圖像旋轉或移動效果。
CSS動畫可以通過兩種方式實現:通過關鍵幀(@keyframes)和通過過渡(transition)。
/* 通過關鍵幀 */ @keyframes example { 0% {background-color: red;} 25% {background-color: yellow;} 50% {background-color: blue;} 100% {background-color: green;} } /* 應用關鍵幀 */ div { width: 100px; height: 100px; animation-name: example; animation-duration: 4s; } /* 通過過渡 */ div { transition: background-color 1s ease-in-out; } div:hover { background-color: blue; }
上面的代碼展示了如何使用兩種不同的方法來創建CSS動畫。通過關鍵幀可以創建更復雜的動畫,例如式微型交互動畫,而通過過渡可以更容易地添加簡單的鼠標懸停效果。這些動畫可以應用于諸如按鈕,導航菜單和滾動圖像等元素上。
總的來說,CSS動畫為Web開發者提供了許多有用的工具以及創造漂亮的和有吸引力的網頁設計。
上一篇css3水平方向縮放
下一篇css3段落首行縮進