CODEWITHSUNDEEP
htmlcsscss-animations
jessica
jessica

Reputation: 495

Animation to make circles appear in a nice way

I have a div, when i hover into this div three circles should appear, i want an animation to apply it to those circles when they appear like popping or something like that to make the effect look nice when they show up, how can i do it? here is my code: 

.circle{
width: 50px;
height: 50px;
border-radius: 50px;
background-color: blue;
}

.circles{
list-style: none;
display: none;
}

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

.hoverover:hover + .circles{
display: inline-block
}
<div class="hoverover">Hover Over Me</div>

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

Upvotes: 0

Views: 1033

Answers (1)

Michael Coker
Michael Coker

Reputation: 53664

Here's an effect using animation, opacity and transform: scale()

.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>

Upvotes: 2

Related Questions