在CSS3中,有一個非常實用的屬性叫做delay。它可以讓我們延遲CSS3動畫的開始時間,進而控制動畫的執行。在實際應用中,我們常常需要讓動畫在特定的時間點才執行,或者為了增加動畫效果的層次感而使用多個延時動畫。這時,delay屬性就能幫我們實現這些效果。
delay屬性可以用于所有支持CSS3動畫的屬性中,并且其取值可以是秒或毫秒。通過設置delay屬性,我們可以在動畫開始執行之前先停留一段時間,從而達到控制動畫時序的目的。比如,我們可以使用以下的樣式來實現一個2秒的延時動畫效果:
.animation { animation-name: bounce; animation-duration: 1s; animation-delay: 2s; animation-fill-mode: forwards; } @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-50px); } }
在上面的代碼中,我們定義了一個名為bounce的動畫,并給其設置了1秒的執行時間和2秒的延時時間。由于animation-fill-mode屬性設置為了forwards,因此動畫執行完畢后保持在最后一幀的狀態。這樣,我們就可以通過使用CSS3的delay屬性控制動畫開始執行的時間,并實現一個非常實用的延時動畫效果。