CSS keyframe animation can achieve delicate and complex effects through techniques. 1. Use animation-timing-function to refine the rhythm, such as the first half of ease-in the second half of ease-out; 2. Control the playback state through animation-play-state and animation-direction to achieve pause, reverse, and back-and-forth playback; 3. Use commas to separate multi-layer animation overlays to create combined animation effects; 4. Dynamically adjust animation parameters in combination with JavaScript, such as modifying CSS variables to change the duration or direction. Mastering these techniques can improve animation fluency, controllability and interactivity.

Although CSS keyframe animation is basic, it can produce very delicate and even complex animation effects after use. Many people stay at the stage of writing a simple rotation or fading. In fact, through some techniques and control methods, your animation can be smoother, more controllable, and even dynamic adjustments can be achieved.

Use animation-timing-function to refine rhythm

Keyframe animations are linear by default, but you can change the transition rhythm between each keyframe through animation-timing-function . For example, use ease-in from 0% to 50%, and change from 50% to 100% to ease-out , which can accelerate the first half of the animation and slow down the second half.

 @keyframes bounce {
  0% { transform: translateY(0); }
  50% { transform: translateY(-100px); }
  100% { transform: translateY(0); }
}

.element {
  animation-name: bounce;
  animation-duration: 2s;
  animation-timing-function: ease-in, ease-out;
}

Note: If you set multiple timing functions, they will be applied in order between the individual keyframes. This technique is suitable for bounce and ease effects.

Control animation playback status: pause, replay and reverse playback

Sometimes you want the animation to pause or play backwards in specific situations, you can use animation-play-state and animation-direction .

• animation-play-state: paused; can pause running animation.
• animation-direction: reverse; will make the animation return backward from the end point to the starting point.
• alternate or alternate-reverse can achieve the effect of back and forth playback.

For example, pause the animation when the mouse hovers:

 .element {
  animation-play-state: running;
}

.element:hover {
  animation-play-state: paused;
}

This method is very suitable for interactive animations, such as button hover effect, circle pause during loading, etc.

Multi-layer animation overlay: Separate multiple animations with commas

You can apply multiple keyframe animations at the same time on one element. Simply separate different animation names with commas and set the corresponding duration, timing function and delay respectively.

 .element {
  animation-name: spin, pulse;
  animation-duration: 2s, 1s;
  animation-timing-function: linear, ease-in-out;
  animation-iteration-count: infinite, infinite;
}

In the above example, .element will perform two animations: spin and zoom pulse at the same time. This approach is great for creating visually rich but well-structured combinations of animations, such as the movement of multiple balls in loading animations.

Dynamically control animation parameters (with JavaScript)

If you want to dynamically adjust the behavior of the animation at runtime, such as changing the duration, keyframe content or playback direction based on user actions, you can operate CSS variables or modify the style directly through JavaScript.

A common practice is to use CSS to customize properties (variables) and then change these values ??in JS:

 .element {
  --duration: 2s;
  animation: move var(--duration) infinite alter;
}

@keyframes move {
  0% { transform: translateX(0); }
  100% { transform: translateX(100px); }
}

JS Control:

 document.querySelector('.element').style.setProperty('--duration', '1s');

This allows dynamic adjustment of animation speed or other parameters without redefining the keyframe, which is ideal for responsive or interactive scenarios.

Basically that's it. After mastering these skills, you can write more layered and interactive CSS animations.

The above is the detailed content of Advanced CSS Keyframe animation techniques and control. For more information, please follow other related articles on the PHP Chinese website!