css延迟3秒进入页面怎么设置

html-css011

css延迟3秒进入页面怎么设置,第1张

经查询以及和使用过的人交流可以知道,应该这样进行设置,animation-delay 属性定义动画什么时候开始。

animation-delay 值单位可以是秒(s)或毫秒(ms)。

提示: 允许负值,-2s 使动画马上开始,但跳过 2 秒进入动画。

语法

animation-delay: time

time可选。定义动画开始前等待的时间,以秒或毫秒计。默认值为0

https://codepen.io/alphardex/pen/XWWWBmQ

通过animation-delay来控制相同的元素(div)不同延时显示动画

https://codepen.io/alphardex/pen/KKwvKGY

用JS将句子或单词分割成字母,并给每个字母加上不同延时的动画。

https://codepen.io/alphardex/pen/eYYMYXJ

如果要从中间元素开始交错的话,就要给当前元素的延时各加上一个值,这个值就是中间元素的下标到当前元素的下标的距离(也就是下标之差的绝对值)与步长的乘积,即:delay + Math.abs(i - middle) * step,其中中间元素的下标middle = letters.filter(e =>e !== "").length / 2

https://codepen.io/alphardex/pen/dyPorwJ