CSS動畫是一種很常用的制作網頁效果的手段,但是有時我們可能需要讓動畫在幾秒后才開始播放。這時,可以使用CSS3的animation-delay屬性來實現。以下是一個示例:
/*定義動畫*/ @keyframes myanimation { from { transform: translateX(0); } to { transform: translateX(200px); } } /*設置元素樣式*/ .my-element { width:100px; height: 100px; background-color: gray; animation: myanimation 1s ease-in-out 3s; /*設置animation-delay屬性,延遲3秒播放動畫*/ }
上述代碼中,我們先定義一個名為"myanimation"的動畫,從元素的左邊移動到它右邊200像素的位置。然后,在指定元素的樣式中,我們使用了animation屬性,其中第四個參數是animation-delay,即動畫延遲的時間,這里我們設置為3秒。這意味著,在元素加載完畢后,將會等待3秒才開始播放動畫。
總之,CSS3提供了更多控制動畫的方法,通過動態調整CSS樣式,我們可以使得網頁變得更加生動有趣!
上一篇css選擇器 奇數行
下一篇css選擇器優先級最低6