Animation Endings Made Easy: Controlling What Happens After the Show

By default, CSS animations play through their cycle and then revert back to the initial styles they had before the animation began. This might not be desirable if you want the element to stay in its transformed state after the animation finishes.

The Solution: animation-fill-mode

CSS provides a property called animation-fill-mode that controls what happens to the animated element before and after the animation runs. To maintain the final state, you can set it to forwards:

.my-element {
  animation: my-animation 2s ease-in-out; /* Animation definition */
  animation-fill-mode: forwards;
}

How it Works:

• With animation-fill-mode: forwards;, the browser applies the styles defined in the last keyframe of the animation (100% in most cases) to the element even after the animation has completed. This ensures that the element remains visually in its final state.

Example:

Let's say you have an animation that fades in an element:

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.my-element {
  opacity: 0; /* Initial opacity */
  animation: fadeIn 2s ease-in-out;
  animation-fill-mode: forwards;
}

In this scenario, the element will start with zero opacity (invisible), animate to full opacity (visible), and then stay visible after the animation finishes because animation-fill-mode: forwards; is applied.

Additional Considerations:

• animation-iteration-count affects the final state. If you set it to a value greater than 1 (e.g., animation-iteration-count: 3;), the animation will repeat and the final state will be applied after the last iteration.
• animation-direction can also influence the final state. With animation-direction: alternate;, the element will alternate between its initial and final states based on the number of iterations.

Example Codes for Maintaining Final State with CSS Animations

Fading In an Element:

This code fades in an element and keeps it visible after the animation:

.fade-in {
  opacity: 0; /* Initial opacity (invisible) */
  animation: fadeIn 2s ease-in-out;
  animation-fill-mode: forwards;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

Sliding an Element Up:

This code slides an element up from the bottom of the screen and keeps it in its final position:

.slide-up {
  position: relative; /* Required for relative positioning */
  bottom: -100px; /* Initial position off-screen */
  animation: slideUp 1s ease-in-out;
  animation-fill-mode: forwards;
}

@keyframes slideUp {
  from { bottom: -100px; }
  to { bottom: 0; }
}

Rotating an Element:

This code rotates an element 90 degrees and keeps it rotated:

.rotate {
  transform: rotate(0deg); /* Initial rotation */
  animation: rotate90 1s ease-in-out;
  animation-fill-mode: forwards;
}

@keyframes rotate90 {
  from { transform: rotate(0deg); }
  to { transform: rotate(90deg); }
}

Changing Background Color:

This code changes an element's background color to red and keeps it red:

.change-color {
  background-color: #fff; /* Initial white background */
  animation: turnRed 1s ease-in-out;
  animation-fill-mode: forwards;
}

@keyframes turnRed {
  from { background-color: #fff; }
  to { background-color: red; }
}

• You can leverage JavaScript to detect when the animation finishes and then apply the final styles directly using DOM manipulation techniques.

Here's an example:

<div id="my-element">This element will fade in and stay visible.</div>

#my-element {
  opacity: 0; /* Initial opacity */
  animation: fadeIn 2s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

const element = document.getElementById('my-element');

element.addEventListener('animationend', () => {
  element.style.opacity = 1; // Set final opacity to 1
});

In this example, the JavaScript code listens for the animationend event on the element. When the animation finishes, the event listener sets the opacity style back to 1 (fully visible) to maintain the final state.

Using CSS Transitions (Limited Use Cases):

• If your animation only involves a single property change (like opacity or transform) and doesn't require complex animation sequences, you can use CSS transitions instead.

.fade-in {
  opacity: 0; /* Initial opacity */
  transition: opacity 2s ease-in-out;
}

.fade-in.visible {
  opacity: 1; /* Final opacity */
}

In this example, the .fade-in class defines the initial opacity and the transition duration. Then, a separate class, .visible, is used to trigger the transition by setting the opacity to 1. This approach relies on adding/removing classes with JavaScript to initiate the animation and maintain the final state.

Choosing the Right Method:

• animation-fill-mode: forwards; is generally the recommended approach due to its simplicity and browser support.
• JavaScript with event listeners offers more flexibility for complex scenarios but requires additional code.
• CSS transitions are suitable for simple animations where you only need to maintain the final state of a single property.