How Can I Stop a CSS3 Animation at Its Final Frame?

Halt CSS3 Animation at its Final Frame

When working with CSS3 animations, it can be desirable to permanently freeze the animation at the end of its final frame. This can be particularly useful for animations that move elements offscreen.

One method to achieve this is by utilizing the animation-fill-mode property. When set to forwards, it ensures that the element retains the appearance of its last animated frame even after the animation cycle completes.

For instance, in the given animation with keyframes named "colorchange":

@keyframes colorchange {
  0%   { transform: scale(1.0) rotate(0deg); }
  50%  { transform: rotate(340deg) translate(-300px,0px) }
  100% { transform: scale(0.5) rotate(5deg) translate(1140px,-137px); }
}

To stop the animation permanently at the final frame, add animation-fill-mode: forwards; to the animated element:

.animated-element {
  animation-name: colorchange;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

This will ensure that once the animation completes, the element remains scaled to 0.5, rotated by 5 degrees, and translated to the final position specified in the 100% keyframe.

The above is the detailed content of How Can I Stop a CSS3 Animation at Its Final Frame?. For more information, please follow other related articles on the PHP Chinese website!