animation-delay 屬性——動畫示例
- 2019 年 11 月 26 日
- 筆記
用途
animation-delay 規定動畫何時開始。默認是 0。即從動畫應用在元素上到動畫開始的這段時間的長度。
代表動畫在應用到元素上後立即開始執行。否則，該屬性的值代表動畫樣式應用到元素上後到開始執行前的時間長度；
定義一個負值會讓動畫立即開始。但是動畫會從它的動畫序列中某位置開始。例如，如果設定值為-1s，動畫會從它的動畫序列的第1秒位置處立即開始。
語法
animation-delay: 1s; animation-delay: 3ms;
值
|
值 |
描述 |
|---|---|
|
<time> |
動畫樣式應用到元素到元素開始執行動畫的時間差。該值可用單位為秒(m)和毫秒(ms)。如果未設單位，定義無效。 |
例子
/* HTML */ <div class="stage"> <figure class="ball"></figure> </div> /* CSS */ @keyframes 'slide' { from { left: 0; top: 0; } 50% { left: 244px; top: 100px; } to { left: 488px; top: 0; } } .stage { background: #ccc; border-radius: 6px; height: 150px; position: relative; min-width: 550px; } .stage .ball { animation-name: slide; animation-duration:2s; animation-timing-function: ease-in-out; animation-delay: 1.5s;//延遲1.5秒 animation-iteration-count: infinite; animation-direction: alternate;//反向運行動畫，每周期結束動畫由尾到頭運行。 } .ball { background: red; border-radius: 50%; height: 40px; position: absolute; width: 40px; }
