关于css3动画瞬间改变状态的方法

  在写css3动画的时候,可能有一种场景是:动画播放到了50%的时候,要马上切换到一个不同的状态,然后以新状态为起点,再播放到100%,最后又要跳转的0%。

  以前碰见这种情况只能设置两个盒子,一个盒子负责前半段,另外一个盒子负责后半段。但是经过长达两个小时的冥思苦想,我突然尝试了一下50.1%的时候直接把状态设置为后半段的初始态,发现此方案可行。但是多次试验后,又发现有的时候盒子会一闪而过(就是0.1%的瞬间还是可以肉眼捕捉到)。于是我又尝试了50.01%,盒子切换的瞬间就不可能被捕捉到了。

  至于100%到0%则不用这样设置,因为动画每播放完一轮后会自动切回0%的状态,所以只需要在中间设置即可。

posted @ 2020-05-19 16:59  简讯  阅读(396)  评论(0编辑  收藏  举报