CSS3 animation 是一套非常簡便易行的動畫制作方式,通過聲明一些關鍵幀來決定一個元素的動畫效果,同時 CSS3 animation 還可以通過設定 delay 值來調整動畫間隔。
什么是 delay 值?簡單來說,delay 值就是動畫開始執行前等待的時間,通常以秒(s)為單位計算。例如,我們想要讓一個元素在頁面加載完畢后延遲 2 秒鐘開始動畫,可以聲明如下的 CSS:
.animations { animation-name: example; animation-duration: 2s; animation-delay: 2s; } @keyframes example { from {transform: scale(1);} to {transform: scale(2);} }
上述代碼中,animation-delay 就是我們設置的 2 秒延遲。相比于通過 JavaScript 控制動畫間隔,使用 CSS3 的 delay 值更為便捷和簡單。
不過要注意的是,動畫延遲時間如果設置得過長,可能導致用戶感覺網頁反應緩慢,產生不良的用戶體驗。因此在設計動畫時,需要根據具體情況和目的來選擇合適的間隔時間。