ul{width: 300px;border: red;}
ul li{width: 300px;height: 70px;line-height: 70px;background: #fff;text-align: center;cursor: pointer;overflow: hidden;border: 1px solid #eee;}
ul li:hover .circle{
animation: circle-opacity 0.5s linear 0s 1;
-webkit-animation-fill-mode:forwards;/*让动画停在最后是这个属性，*/
animation-fill-mode:forwards;
}
ul li a{position: relative;left: -50px;color: #333;top: -30px;}
.circle{background: #fff;border-radius: 50%;width: 70px;height: 70px;display: inline-block;margin: 0 auto;}
@keyframes circle-opacity{
0% {
background: rgba(192,225,250,0);
}
50% {
transform:scale(4);
background: rgba(192,225,250,1);
}
100% {
transform:scale(16);
background: rgba(192,225,250,0);
}
}
<ul class="clear">
<li><span class="circle"></span><a href="#">Button</a></li>
<li><span class="circle"></span><a href="#">Elements</a></li>
<li><span class="circle"></span><a href="#">Forms</a></li>
<li><span class="circle"></span><a href="#">Charts</a></li>
</ul>
