在CSS中,可以使用animation-delay
屬性來控制動畫的延時顯示。animation-delay
屬性指定了動畫在瀏覽器加載完元素后多久開始播放。
如果你想讓一個動畫在加載完元素后5秒開始播放,你可以這樣寫:
.my-element { animation-name: my-animation; animation-duration: 2s; animation-delay: 5s; }
在上面的代碼中,my-animation
是動畫的名稱,2s
是動畫的持續(xù)時間,5s
是動畫的延時時間。
如果你想讓動畫在鼠標(biāo)懸停時開始播放,你可以使用hover
偽類來實現(xiàn):
.my-element:hover { animation-name: my-animation; animation-duration: 2s; animation-delay: 0s; }
在上面的代碼中,我們將animation-delay
設(shè)置為0s
,這意味著動畫會在鼠標(biāo)懸停時立即開始播放。
如果你想讓動畫在加載完元素后一段時間內(nèi)開始播放,并且在這段時間內(nèi)元素是不可見的,你可以使用visibility
屬性來實現(xiàn):
.my-element { visibility: hidden; animation-name: my-animation; animation-duration: 2s; animation-delay: 5s; }
在上面的代碼中,我們將visibility
設(shè)置為hidden
,這意味著元素在加載完元素后5秒內(nèi)是不可見的,然后動畫開始播放。