@keyframes 如何精确设置三分之一的时间点？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

Can I use?

› http://caniuse.com/

Less

› http://lesscss.org

Cool Libraries

› Bootstrap from Twitter

› Jetstrap

这是一个创建于 2662 天前的主题，其中的信息可能已经有所发展或是发生改变。

@keyframes 可以设置百分比节点，但如果要三分之一、三分之二的节点呢？ 33.33% 毕竟不是精确的，我需要循环的动画，久而久之动画会出现差错的。

节点

动画

精确

设置

13 条回复 • 2017-08-11 11:34:56 +08:00

FrankFang128

2017-08-10 23:23:24 +08:00

33.333333%

islujw

2017-08-10 23:39:50 +08:00

@FrankFang128 这我可以打一百个，比你还多……

JimmyCai

2017-08-10 23:45:08 +08:00 via Android

用 calc() ？

oott123

2017-08-11 00:01:40 +08:00 via Android

用 33% 。再久而久之也不会出现差错。

geelaw

2017-08-11 00:22:32 +08:00 via iPhone

并不会久而久之出错，只是你每次看到的动画其实都不是完美的 1/3 而已。

islujw

2017-08-11 00:31:32 +08:00

@oott123 这个动画是和别的配合的哦，两个会渐渐碰不上的。

islujw

2017-08-11 00:31:37 +08:00

@geelaw 这个动画是和别的配合的哦，两个会渐渐碰不上的。

islujw

2017-08-11 00:34:02 +08:00

@geelaw Sorry，我的意思是，这个动画是和别的精密配合的，不是完美的 1/3 会有可感知的一瞬之间的卡住的感觉。

viko16

2017-08-11 00:36:43 +08:00

@islujw #8 完美配合应该用 animationstart animationend 等事件处理咯？

islujw

2017-08-11 00:40:20 +08:00

@viko16 谢谢 ^^，我去研究下～

geelaw

2017-08-11 00:47:17 +08:00 via iPhone

@islujw 那你让另一个动画也不完美就好了。而且我想象不到你要怎么设置两个动画才会“久而久之”地不同步。

或者把问题极小化详细描述到底是怎么一个需求。

Mutoo

2017-08-11 07:19:33 +08:00

精确控制请用 js。

islujw

2017-08-11 11:34:56 +08:00

@geelaw 也就是说，@keyframes 无法设置非整数。