CSS animation: hover-in and hover-out

Question

I tried to make an animation that is triggered on hover and hover out. I didn't use the transition property because the animations are quite complex.

on hover in: zoom-in the element from 100% => 150% => 130%
on hover out: zoom-out the element from 130% => 80% => 100%

The hover-in works perfectly, but the hover-out always running at startup. It should animate when has been hover-in.

Then tried to set the CSS var --anim-hover-out: none, so no animation on startup. Then, on the end of hover-in, set --anim-hover-out: hover-out, so the hover-out animation now ready to play. But setting the CSS var inside @keyframes didn't work.

The goal is: .test:not(:hover):has-hover { do hover-out animation }

Note: no JavaScript, pure CSS only.

body {
  font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  padding: 100px;
  font-size: 13px;
}

div {
  background: #eee;
  margin: 0 auto;
  width: 200px;
  padding: 100px;
  text-align: center;
  /* border-radius */
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  /* box-shadow */
  -webkit-box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
  -moz-box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
  box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
}
:root {
  --anim-hover-out: unset;
}

.test:not(:hover) {
  animation-name: var(--anim-hover-out);
  animation-duration: 500ms;
  animation-fill-mode: both;
}

.test:hover {
  animation-name: hover-in;
  animation-duration: 500ms;
  animation-fill-mode: both;
}
@keyframes hover-in {
  0: {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1.3);
    --anim-hover-out: hover-out;
  }
}
@keyframes hover-out {
  0: {
    transform: scale(1.3);
  }
  50% {
    transform: scale(0.8);
  }
  100% {
    transform: scale(1);
  }
}

<div class="test">Hello World!</div>

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) — ATP, Dec 24 '20 at 11:12

score 4 · Answer 1 · answered Dec 24 '20 at 11:28

There is no way to set this without using JavaScript.

Because even if you manually define the animation name, the animation is triggered instantly.

So setting it up afterwards is not a solution. After the important (onmouseleave) thing you have to set it over.

See also snippet

A complete example that works

body {
  font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  padding: 100px;
  font-size: 13px;
}

div {
  background: #eee;
  margin: 0 auto;
  width: 200px;
  padding: 100px;
  text-align: center;
  /* border-radius */
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  /* box-shadow */
  -webkit-box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
  -moz-box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
  box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
}
:root {
  --anim-hover-out: hover-out-fake;
}

.test:hover {
  animation-name: hover-in;
  animation-duration: 500ms;
  animation-fill-mode: both;
}

.test {
  animation-name: var(--anim-hover-out);
  animation-duration: 500ms;
  animation-fill-mode: both;
}

@keyframes hover-in {
  0: {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1.3);
    --anim-hover-out: hover-out;
  }
}
@keyframes hover-out {
  0: {
    transform: scale(1.3);
  }
  50% {
    transform: scale(0.8);
  }
  100% {
    transform: scale(1);
  }
}

<div class="test" onmouseleave="document.documentElement.style.setProperty('--anim-hover-out', 'hover-out')">Hello World!</div>

Actually this can be achieved with CSS-only. Admittedly it is a hacky way to do it, but if Javascript is out of the question for some reason, then we can add an animation to a wrapper that will change its opacity from 0 to 1. — Lajos Arpad, Apr 07 '23 at 17:58

score 0 · Answer 2 · answered Apr 07 '23 at 17:57

You can hide your content for the initial phases of page load via

body{
    animation-name: loading;
    animation-duration: 500ms;
    animation-fill-mode: both;
}

@keyframes loading {
  0% {
    opacity: 0;
  }
  99% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

which will hide your item while it's performing the hover-out animation at page initialization. If you want to avoid waiting, then you can attach the animations to classes, like .hovered and .blurred and toggle them via Javascript. If hiding body for one of its elements is too much, then you can wrap another div around your div and specify this animation for that one.

body {
  font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  padding: 100px;
  font-size: 13px;
}

div {
  background: #eee;
  margin: 0 auto;
  width: 200px;
  padding: 100px;
  text-align: center;
  /* border-radius */
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  /* box-shadow */
  -webkit-box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
  -moz-box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
  box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
}
:root {
  --anim-hover-out: unset;
}

body{
    animation-name: loading;
    animation-duration: 500ms;
    animation-fill-mode: both;
}

@keyframes loading {
  0% {
    opacity: 0;
  }
  99% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.test:not(:hover) {
  animation-name: hover-out;
  animation-duration: 500ms;
  animation-fill-mode: both;
}

.test:hover {
  animation-name: hover-in;
  animation-duration: 500ms;
  animation-fill-mode: both;
}
@keyframes hover-in {
  0: {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1.3);
    --anim-hover-out: hover-out;
  }
}
@keyframes hover-out {
  0: {
    transform: scale(1.3);
  }
  50% {
    transform: scale(0.8);
  }
  100% {
    transform: scale(1);
  }
}

<div class="test">Hello World!</div>

CSS animation: hover-in and hover-out

2 Answers2