Hacking CSS Animation State and Playback Time

This article delves into manipulating CSS animations, specifically addressing the challenges of restarting and slowing down animations without using JavaScript. The author recounts their experience building a CSS-only Wolfenstein 3D-inspired game, highlighting two particularly tricky animation problems: triggering a weapon firing animation on enemy clicks and implementing dramatic slow motion for a boss's final hit.

The core issue revolves around the browser's handling of animation states. 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 the existing animation, not restarting it.
• Animation Cloning: Creating distinct animation names (spin1, spin2) for each trigger works, but requires careful CSS rule ordering.
• Appending Animations: Adding the same animation multiple times to the animation-name property also functions, but can lead to unexpected behavior with animation-fill-mode: forwards.

The key takeaway is that you can't directly restart a CSS animation; you must add a new one.

Problem 2: Slow Motion

Simply changing animation-duration while an animation is running results in jarring jumps. 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 Animation: Pausing the original animation and adding a slower one with the same starting point still leads to jumps due to the unpredictable pause point.
• Using Custom Properties: A more sophisticated method uses custom properties (--angle1, --angle2) to track the animation's progress and seamlessly transition between animations with different durations. This, however, requires browser support for @property.
• The "Gear-Shifting" Technique: This clever technique uses nested divs, each with its animation, to switch between animation speeds. It's animation-specific and doesn't generalize well.
• JavaScript Solutions: JavaScript offers more robust solutions for handling animation progress and seamlessly transitioning between different animation speeds, offering flexibility for complex animations.

The article concludes by acknowledging the inspiration from other CSS-only projects and providing a comprehensive overview of the challenges and solutions involved in manipulating CSS animations. The author encourages readers to explore the provided examples and share their thoughts.

The above is the detailed content of Hacking CSS Animation State and Playback Time. For more information, please follow other related articles on the PHP Chinese website!