黑客CSS动画状态和播放时间

> > > > > > > > > > > >

不使用JavaScript。作者讲述了他们建立仅CSS仅Wolfenstein 3D启发的游戏的经验，突出了两个特别棘手的动画问题：触发武器对敌人的点击启用武器发射动画，并为老板的最终命中实施巨大的慢动作。

围绕Browsers的核心问题围绕着浏览器的核心问题，围绕着Browsers的动物处理状态。 Simply adding or modifying animation properties while an animation is already running doesn't always restart or slow it down as expected.

Problem 1: Replaying Animations

The author explores several approaches to replaying animations:

• Multiple Checkboxes (Ineffective): Using separate checkboxes for each animation attempt fails because CSS only continues现有动画，不重新启动。功能，但可以通过 Animation-Fill模式导致意外行为：forwards 。

关键要点是您不能直接重新启动CSS动画；您必须添加一个新的。

问题2：慢动作

简单地更改动画效应，而动画正在运行会导致跳跃的刺激。 The browser applies the new duration from the animation's start, not its current state.

Several approaches are explored:

• Direct animation-duration Change (Ineffective): Changing animation-duration mid-animation causes visual glitches.
• Pausing and Appending a Slower动画：暂停原始动画并添加一个具有相同起点的较慢的动画，由于无法预测的暂停点而导致跳跃。但是，这需要浏览器支持 @property 。
• “齿轮转移”技术：这种聪明的技术使用嵌套的Divs，每个Divs都带有动画，以在动画速度之间切换。它是特定于动画的，并且不能很好地概括。
• javaScript解决方案： javaScript为处理动画的进度和在不同的动画速度之间无缝过渡，为复杂动画提供了灵活性，为复杂动画提供了更强大的解决方案。操纵CSS动画涉及的挑战和解决方案。作者鼓励读者探索提供的例子并分享他们的想法。

以上是黑客CSS动画状态和播放时间的详细内容。更多信息请关注PHP中文网其他相关文章！