CSS動畫是網頁設計中非常常用的一種技術,通過CSS可以實現各種華麗的動畫效果,例如抖動、閃爍、旋轉、淡入淡出等。不過,在實際應用中,有些動畫需要等待一段時間后才開始執行,這時就需要使用延時開始動畫。
實現延時開始動畫的方法非常簡單,只需要在CSS樣式中使用"animation-delay"屬性來設置延遲時間即可。例如:
.box{ width: 100px; height: 100px; background-color: red; animation: shake 1s infinite 1s; } @keyframes shake{ 0%{ transform: translateX(0px); } 50%{ transform: translateX(10px); } 100%{ transform: translateX(0px); } }
以上代碼表示一個名為"shake"的動畫,它會把"box"元素來回抖動,但是抖動效果會在1秒后才開始執行。
其中,"animation-delay"屬性的值為"1s",表示延遲1秒后才開始執行動畫。注意,這個值需要和"animation"屬性中的其他值分開編寫,用逗號隔開。
除了延時開始動畫外,CSS還支持很多其他實用的動畫技巧,例如動畫的循環次數、動畫的速度變換、動畫的暫停和繼續等。熟練掌握這些技巧,可以讓我們在網頁設計中發揮更多的創意和想象力。
上一篇css實現圖片位置居中
下一篇div 關閉樣式