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; }
