CSS動畫標簽是Web設計中應用廣泛的標簽,可以通過CSS來實現動態效果,為網頁增添動感。以下是幾個常用的CSS動畫標簽:
1. @keyframes
定義一個動畫幀序列,實現從一個狀態到另一個狀態的動畫效果,可以設置動畫持續時間、動畫函數等屬性。 示例:
@keyframes myanimation {
from {
transform: translateX(0);
}
to {
transform: translateX(100%);
}
}
2. animation
給元素設置動畫效果,可以設置動畫名稱、屬性值、播放時長等屬性。 示例:
.box {
animation: myanimation 2s ease-out;
}
3. transition
定義元素在變化過程中的過渡效果,可以設置過渡的屬性名稱、播放時長等屬性。 示例:
.box:hover {
transition: all 1s ease-out;
transform: scale(1.2);
}
4. transform
為元素設置變換效果,可以實現平移、縮放、旋轉等效果。 示例:
.box {
transform: translateX(100px);
}
以上是一些常用的CSS動畫標簽,可以通過它們來實現各種動態效果,讓網頁更加生動有趣。同時,也要注意合理使用動畫效果,避免過多的動畫對網頁性能造成影響。
上一篇css動畫用到哪些屬性
下一篇css動畫浮動