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>