CSS3動畫在網頁設計中是不可或缺的一部分。如果您想讓動畫延遲3秒后開始運行,只需要在CSS代碼中設置一個延遲時間。比如,您可以在屬性欄中設置"animation-delay: 3s;"。
.box { width: 100px; height: 100px; background-color: #f00; position: relative; animation-name: example; animation-duration: 2s; animation-delay: 3s; animation-iteration-count: infinite; } @keyframes example { 0% {left: 0px; top: 0px;} 50% {left: 200px; top: 0px;} 100% {left: 0px; top: 0px;} }
在上述代碼中,我們設置一個名為"box"的動畫盒子。我們將動畫名稱設置為"example",動畫運行時間為2s,延遲時間為3s,循環次數為無限。在@keyframes規則中,我們定義了一個簡單的動畫,使盒子在頁面上左右移動。這個動畫效果將在延遲3秒后開始運行。
總之,通過設置animation-delay屬性,您可以很容易地讓CSS3動畫在一定的延遲時間后開始運行。這使得您可以更好地控制動畫的時間和效果,以提高網頁的可讀性和吸引力。