【CSS3】設定動畫開始播放的時間
阿新 • • 發佈:2019-02-05
animation-delay屬性用來定義動畫開始播放的時間,用來觸發動畫播放的時間點。和transition-delay屬性一樣,用於定義在瀏覽器開始執行動畫之前等待的時間。
語法規則:
animation-delay:<time>[,<time>]*
案例演示:
瀏覽器渲染樣式之後2S之後觸發move動畫。
HTML:
<div><span></span></div>
CSS:
@keyframes move { 0%{ transform: translate(0); } 15%{ transform: translate(100px,180px); } 30%{ transform: translate(150px,0); } 45%{ transform: translate(250px,180px); } 60%{ transform:translate(300px,0); } 75%{ transform: translate(450px,180px); } 100%{ transfrom: translate(480px,0); } } div { width: 500px; height: 200px; border: 1px solid red; margin: 20px auto; } div span { display: inline-block; width: 20px; height: 20px; background: green; border-radius: 100%; animation-name:move; animation-duration: 10s; animation-timing-function:ease; animation-delay:2s;animation-iteration-count:infinite; }
結果展示: