Possible to reverse a CSS animation on class removal?

html

responsive-design

performance

best-practices

byAlex Kataev·Sep 5, 2024

Want to reverse a CSS animation upon class removal? Use animation-direction: reverse.

.element:hover {
  animation: slideIn 1s forwards;
}

.element.reverse {
  animation: slideIn 1s reverse both;
}

@keyframes slideIn {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

Toggle the class using JavaScript to trigger the reverse animation:

const el = document.querySelector('.element');
el.addEventListener('mouseleave', () => el.classList.toggle('reverse'));

Setting animation-direction to reverse along with animation-fill-mode: both confirms the element returns to its origin upon class toggle.

Make it smooth: add transitions and control the flip

Want to improve your reverse animation with enhanced effects? Here are some tips.

Get a better feel with `ease-in-out`

For a smoother transition, ease-in-out is the perfect timing function. It mimics a natural feel by starting and ending the animation slowly:

.element {
  animation-timing-function: ease-in-out;
}

Control pivot point with `transform-origin`

Conquer the axis of rotation for a more sophisticated animation. transform-origin helps you take control:

.element {
  transform-origin: top left;
}

JavaScript or jQuery - the choice is yours!

No matter what your preference, you've got control. Here are quick examples of class toggle, one with plain JavaScript and the other with jQuery:

// With JavaScript
const el = document.querySelector('.element');

el.addEventListener('mouseover', () => {
  el.classList.add('animate-forwards');
});

el.addEventListener('mouseout', () => {
  // To defeat the monstrous flicker, force a reflow!
  void el.offsetWidth;
  el.classList.replace('animate-forwards', 'animate-backwards');
});

// JQuery style
$('.element').on({
  mouseenter: function() {
    $(this).addClass('animate-forwards');
  },
  mouseleave: function() {
    // Because reflow doesn't clear itself up!
    void $(this)[0].offsetWidth;
    $(this).removeClass('animate-forwards').addClass('animate-backwards');
  }
});

Deep dive into manipulating animations

Let's go deeper and explore further into CSS and JavaScript, making your animations interactive.

Element style consistency

Consistency is key for a smooth user experience. Line-height, color, and size should remain consistent to retain visual balance:

.element {
  /* Consistent property styles */
  line-height: 1.5;
  color: #333;
  font-size: 18px;
  /* Animate transition */
  transition: color 1s;
}

Power of Animate.css

Animate.css library is your ready-to-use animation partner, helping you trigger animations through simple class additions:

<link rel="stylesheet" href="animate.min.css" />
<div class="element animated infinite">Your Content</div>

Ease of :hover

In cases of simplicity, a :hover pseudo-class is your ally. Pair it up with JavaScript and animations get a lot smoother:

.element:hover {
  animation: slideIn 1s forwards;
}

Visualization

Let's break this down with a fun code-dance comparison:

Before Class Removal: 🕺💃👯‍ (Animations in action) Class Removed: 🎭➡️💺 (Animations take a chill pill)

When the class triggering animation is removed:

Stage Without Class: [🕺🪑, 💃🪑, 👯‍🪑]

To Reverse, roll the sequence backward with a new dance (class):

Add Reverse Class: 🔄🕺💃👯‍

Think flipbook: Forward animation 📖→, Backward animation 📖←

explain-codes / Html / Possible to reverse a CSS animation on class removal?

Linked

How to rotate a <div> 90 degrees?



Append an element with fade in effect [jQuery]



Not possible to use CSS calc() with transform: translateX in IE



Keep overflow div scrolled to bottom unless user scrolls up



Outline radius?



Scrollintoview Scrolls just too far



How do I reverse a list or loop over it backwards?



Make it smooth: add transitions and control the flip Deep dive into manipulating animations Visualization