Keep css animation appearing after unhovering state

Question

I have a div. When I hover into this div, 3 circles should pop in using css animation. But they disappear, when I move the mouse away from the div. How can I make them stay without using jquery? Here is my code:

.circle {
  width: 50px;
  height: 50px;
  border-radius: 50px;
  background-color: blue;
  list-style: none;
  opacity: 0;
  transform: scale(0);
}

.circles li {
  margin-top: 10px;
}

.hoverover:hover + .circles .circle {
  animation: popin .25s forwards;
}

@keyframes popin {
  80% {
    transform: scale(1.15);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

<div class="hoverover">Hover Over Me</div>

<ul class="circles">
  <li class="circle"></li>
  <li class="circle"></li>
  <li class="circle"></li>
</ul>

Ori Drori · Accepted Answer · 2017-06-07 21:35:49Z

3

To make the circles stay as long as the .hoverover element or they are hovered you need to insert the .circles container into .hoverover, and make some changes to the way .circles behave when hovered, and not hovered:

.circles {
  margin: 0;
  padding: 15px;
}

.hoverover {
  display: inline-block; /** limit it to the size and height of the text **/
  height: 20px;
}

.hoverover:not(:hover) > .circles { /** prevent opening circles by hovering it when invisible **/
  pointer-events: none;
}

.circle {
  width: 50px;
  height: 50px;
  border-radius: 50px;
  background-color: blue;
  margin-top: 10px;
  list-style: none;
  opacity: 0;
  transform: scale(0);  
}

.hoverover:hover .circle {
  animation: popin .25s forwards;
}

@keyframes popin {
  80% {
    transform: scale(1.15);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

<div class="hoverover">
  <span>Hover Over Me</span>

  <ul class="circles">
    <li class="circle"></li>
    <li class="circle"></li>
    <li class="circle"></li>
  </ul>

</div>

Previous answer:

When the .hoverover element is hovered, it applies the animation animation: popin .25s forwards; to the .circle elements. When the hover ends the animation is removed, and the element disappears.

To solve that start the animation paused on the .circle, and "resume" it when .hoverover is hovered:

.circle {
  width: 50px;
  height: 50px;
  border-radius: 50px;
  background-color: blue;
  list-style: none;
  opacity: 0;
  transform: scale(0);
  animation: popin .25s forwards;
  animation-play-state: paused;
}

.circles li {
  margin-top: 10px;
}

.hoverover:hover + .circles .circle {
  animation-play-state: running;
}

@keyframes popin {
  80% {
    transform: scale(1.15);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

<div class="hoverover">Hover Over Me</div>

<ul class="circles">
  <li class="circle"></li>
  <li class="circle"></li>
  <li class="circle"></li>
</ul>

edited Jun 7, 2017 at 21:35

answered Jun 7, 2017 at 12:13

Ori Drori

196k32 gold badges243 silver badges233 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Gerard Over a year ago

You're a true GENIUS!

jessica Over a year ago

can i make them disappear after a while? i want to keep them so the user can click on one of them if he wanted to, and after unhovering they should disappear

jessica Over a year ago

Nothing changed they're still there when i unhover

jessica Over a year ago

@OriDrori it doesn't work on the other code i dont know why :/

Ori Drori Over a year ago

What browser are you using?

|

Raj · Accepted Answer · 2017-06-07 12:47:11Z

0

You only need to pause animation with

-webkit-animation-play-state: paused; /* Chrome, Safari, Opera */
    animation-play-state: paused;

And run it again on hover

-webkit-animation-play-state: running; /* Chrome, Safari, Opera */
    animation-play-state: running;

<html>
<div class="hoverover">Hover Over Me</div>

<ul class="circles">
  <li class="circle"></li>
  <li class="circle"></li>
  <li class="circle"></li>
</ul>

<style>
.circle {
  width: 50px;
  height: 50px;
  border-radius: 50px;
  background-color: blue;
  list-style: none;
  opacity: 0;
  transform: scale(0);
}

.circles li {
  margin-top: 10px;
}

.circles .circle{
   animation: popin .25s forwards;
   -webkit-animation-play-state: paused; /* Chrome, Safari, Opera */
    animation-play-state: paused;
}
.hoverover:hover + .circles .circle {
 -webkit-animation-play-state: running; /* Chrome, Safari, Opera */
    animation-play-state: running;
}

@keyframes popin {
  80% {
    transform: scale(1.15);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
</style>

</html>

answered Jun 7, 2017 at 12:47

Raj

2,0343 gold badges32 silver badges57 bronze badges

1 Comment

jessica Over a year ago

can i make them disappear after a while? i want to keep them so the user can click on one of them if he wanted to, and after unhovering they should disappear

Collectives™ on Stack Overflow

Keep css animation appearing after unhovering state

2 Answers 2

8 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related