在CSS中,動畫延遲幾秒可以通過animation-delay屬性來實現。該屬性指定動畫開始之前的時間量,單位為秒(s)或毫秒(ms)。
.animation { animation-duration: 2s; animation-delay: 1s; /* 動畫開始前延遲1秒 */ animation-iteration-count: infinite; } @keyframes example { 0% {transform: scale(1);} 50% {transform: scale(1.5);} 100% {transform: scale(1);} }
上面的代碼中,animation-duration屬性指定動畫播放時間為2秒。animation-delay屬性設置動畫延遲1秒開始播放。animation-iteration-count屬性指定動畫會無限播放。另外,在@keyframes規則中定義動畫效果,從原始大小縮放到1.5倍,然后回到原始大小。
需要注意的是,animation-delay屬性不影響動畫的持續時間,而只是指定動畫開始的時間。如果你希望產生一個無限循環的動畫,那么需要將animation-iteration-count屬性設置為infinite。
總之,在CSS中使用animation-delay屬性可以讓動畫在指定的延遲時間后開始播放。通過調整animation-delay屬性值來控制動畫的播放效果,可以得到各種不同的動畫效果。
上一篇css中不能用負值