How Can I Make a CSS3 Animation Stay on Its Last Frame?

Stopping a CSS3 Animation on Its Last Frame

To prevent an animated element from reverting to its original state after the animation completes, you can use the animation-fill-mode property. This property controls the behavior of the element after the animation has ended.

Solution:

To stop the animation on its last frame (100%), specify the value forwards for the animation-fill-mode property. This will instruct the browser to maintain the final state of the animation after it has finished.

Here's the updated CSS code with the forwards value added:

@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); }
}

.animated-element {
  animation: colorchange 1s infinite;
  animation-fill-mode: forwards;
  /* Optional: remove the element after the animation finishes */
  transition: 0.5s ease opacity;
  animation-end: hide-element;
}

@keyframes hide-element {
  100% {
    opacity: 0;
  }
}

By using animation-fill-mode: forwards, the element will remain in its transformed state after the animation has finished. Additionally, the optional CSS transition and animation-end keyframe can be used to fade out or remove the element once the animation has completed.

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