CSS transition to original state after mouseleave

Question

EDIT: This is not the same as this post, How to reverse an animation on mouse out after hover. The difference being that in this case the state of the transition (how far it has progressed) is essential unlike in the aforementioned post that completely ignores it.

TL;DR: How to animate/transition an element back to it's original state after animation ends?

Hello,

I'm trying to make animate panels so that they "float" when hovered. My problem is that the mouse leaves the panel, instead of transitioning back to it's original state, it jumps instantly back.

A heavily simplified version of this can be found in the snippet available below.

body {
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

div {
  width: 50px;
  height: 50px;
  background-color: red;
}

div:hover {
  animation: float 2s infinite ease;
}

@keyframes float {
  0%, 100% {
    transform: none;
  }
  50% {
    transform: translateY(-20px);
  }
}

<html>
  <head>
    <title>animate to orignal position</title>
  </head>
  <body>
    <div id='box'></div>
  </body>
</html>

As you can see, floating it triggers a smooth animation that resembles a floating motion, however, it is abruptly interrupted as the mouse leaves the box and the animation stops.

So my question is: Is there a way to allow the box to transition back to it's original state, preferably without using JavaScript (although all suggestions are appreciated).

(This has probably been answered somewhere online and if that is the case, then I am truly sorry but I have been unable to find a proper solution to my problem. Please add duplicate if you find an applicable solution.)

Thanks.

TL:DR no, you cannot with CSS.... all you can do is to find some workaround for your particular case and the solution will for sure involve using a simple transtion instead of animation but we need to find how which is not easy for infinite animation — Temani Afif, Nov 03 '18 at 19:31
Possible duplicate of [How to reverse an animation on mouse out after hover](https://stackoverflow.com/questions/16516793/how-to-reverse-an-animation-on-mouse-out-after-hover) — ElusiveCoder, Nov 05 '18 at 05:26
@CodeGator Thanks for the addition. However, please see Edit 1. — troffaholic, Nov 05 '18 at 16:08

score 5 · Accepted Answer · answered Nov 03 '18 at 20:14

You're going to have to use JavaScript and CSS Transitions:

var box = document.getElementById('box')
var timer

box.addEventListener('mouseenter', function () {
  box.classList.add('up')
  timer = setInterval(function () {
    box.classList.toggle('up')
  }, 1000)
})

box.addEventListener('mouseleave', function () {
  clearInterval(timer)
  box.classList.remove('up')
})

body {
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

div {
  width: 50px;
  height: 50px;
  background-color: red;
  transition: transform 1s ease;
}

div.up {
  transform: translateY(-20px);
}

<html>
  <head>
    <title>animate to orignal position</title>
  </head>
  <body>
    <div id='box'></div>
  </body>
</html>

CSS transition to original state after mouseleave

1 Answers1