円をうまく表示するアニメーション

Question

私はdivを持っています。このdivにカーソルを置くと、3つの円が現れるはずです。ポップするようなように見えるときにアニメーションをそのサークルに適用する必要があります。彼らが現れたときに効果が良く見えます、どうすればいいですか？ここに私のコードは次のとおりです。

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

Answer 1

ここでどのように私は円がunhovering後に滞在することができますanimation、opacityと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>