Hover animation backwards

Question

Is there a way to animate the "hover out" in pure CCS? In the example below, all the action post hovering is doing exactly what is suppose to do, the problem comes when the animation / transition going backwards after hovering out. I need my div "tiny" animating back the way is animating in (right now the width is going back without transition) and my whatsapp icon is doing the other way around (I need to change the opacity without fading after hovering out).

In one of my approaches, I change the animation on my div with a transition: opacity (like the WA icon), BUT did not find a way to do the bouncy effect that is required. On the other hand the icon did not respond after insert a @keyframes inside the hover action (maybe out of scope?).

body {
  background-color: blue;
}

.whatsapp-icon {
  position: fixed;
  left: 200px;
  top: 30px;
  opacity: 0;
  transition: opacity 0.2s;
}

.tiny:hover+.whatsapp-icon {
  opacity: 1;
}

.tiny:hover {
  animation: animateDiv 0.4s;
  animation-fill-mode: forwards;
}

.tiny {
  position: fixed;
  opacity: 1;
  background-color: rgb(255, 255, 255);
  border: 1px solid rgb(228, 231, 235);
  border-radius: 15px;
  width: 200px;
  height: 100px;
  box-shadow: 3px 3px 10px black;
}

.box {
  position: fixed;
  width: 200px;
  height: 100px;
  cursor: default;
}

@keyframes animateDiv {
  70% {
    width: 255px;
  }
  85% {
    width: 248px;
  }
  100% {
    width: 250px;
  }
}

<script type="module" src="index.js"></script>

<div class="container">


  <div class="tiny">
    <a class="box" href="https://api.whatsapp.com/send?phone=+XXXXXXXX" target="_blank">

    </a>
  </div>
  <div class="whatsapp-icon">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6b/WhatsApp.svg/240px-WhatsApp.svg.png" width="50" height="50">
  </div>
</div>

Hopefully someone can give me a hint. Thx in advance.

Does this answer your question? [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) — cSharp, May 26 '22 at 23:27
I'll do some test and tell you back. Seems to be promising. Thx — GurnNova, May 27 '22 at 16:35

Jake · Answer 1 · 2022-05-28T13:45:11.440

0

Use a transition instead:

body {
  background-color: blue;
}

.whatsapp-icon {
  position: fixed;
  left: 200px;
  top: 30px;
  opacity: 0;
  transition: opacity 0.2s;
}

.tiny:hover+.whatsapp-icon {
  opacity: 1;
}

.tiny:hover {
  width: 250px;
}
.tiny {
  position: fixed;
  opacity: 1;
  background-color: rgb(255, 255, 255);
  border: 1px solid rgb(228, 231, 235);
  border-radius: 15px;
  width: 200px;
  height: 100px;
  box-shadow: 3px 3px 10px black;
  transition: width 0.4s;
}

.box {
  position: fixed;
  width: 200px;
  height: 100px;
  cursor: default;
}

<script type="module" src="index.js"></script>

<div class="container">


  <div class="tiny">
    <a class="box" href="https://api.whatsapp.com/send?phone=+XXXXXXXX" target="_blank">

    </a>
  </div>
  <div class="whatsapp-icon">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6b/WhatsApp.svg/240px-WhatsApp.svg.png" width="50" height="50">
  </div>
</div>

Transitions can do/undo without the user having to show the points of change.

edited May 28 '22 at 13:45

answered May 26 '22 at 23:30

Jake

97
1
9

Hello there. This approach don't solve any of the problem. I need the tiny class box do the little bouncy to the right, with your solution, It just expands. For the other WA icon, does not stop abruptly like i need, just keep fading away. Thx for your time to respond anyways. – GurnNova May 27 '22 at 02:10
1

@Dan although my answer doesn't show a "fade-out" animation, it does show a different way to do it. Transitions can help make a change, and undo that change without much trouble to write down all the animations, and already can undo the work by itself. – Jake May 28 '22 at 13:49
Understood, thanks for your time and advice. – GurnNova May 29 '22 at 14:04

Hover animation backwards

1 Answers1