CSS迭代间的关键帧动效延迟方法

目录 前端技术

CSS迭代间的关键帧动效延迟方法

有没有遇到过这样的情况?你本来是想让一个动效运行1秒,结果花了4秒,看起来似乎So easy!要真正做到,却并不简单,事实上这是可行的,我们模拟一个。

不在一个点上

它的动效延迟属性(这儿我们用不到),会推迟动效的起始时间,一旦起步就会连续运行。

解决方案:不改变关键帧

你要在心里计算个数学问题:

我想让动效运行1秒。

~加~

我想让动效在迭代之间延迟4秒。

~等于~

5秒。

关键帧动效,计算的是运行的总时间: CSS迭代间的关键帧动效延迟方法

关键帧再运行5秒: CSS迭代间的关键帧动效延迟方法为了使动效只运行1秒,你需要在总时间的1/5(或20%),即第一秒结束的时候变化代码,敲出来应该是这样的:

CSS迭代间的关键帧动效延迟方法

因为没有假设值,你也可以用更少的代码编写,只要中间用逗号把关键步骤隔开就行:

CSS迭代间的关键帧动效延迟方法

用关键帧你可以做出你想象中的东西,只需记得,在插入关键帧的最后一步要100%设置的跟原图案保持一致。

Demo:

HTML:CSS迭代间的关键帧动效延迟方法

CSS:

CSS迭代间的关键帧动效延迟方法

CSS迭代间的关键帧动效延迟方法

智能社撰稿,转载请注明来源!!

作为审稿的我,总觉得标题有点别扭。