我们在绿叶学习网首页可以看到一个非常酷炫的脉冲动画（如下图所示），当鼠标移到元素上时，脉冲动画会循环播放，当鼠标移出元素时，动画就会停止，

实现代码如下：

在线测试
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        @keyframes circle {
            0% {
                transform: scale(1);
                opacity: 0.8;
            }
            20% {
                transform: scale(1);
                opacity: 0.6;
            }
            40% {
                transform: scale(1.2);
                opacity: 0.4;
            }
            60% {
                transform: scale(1.4);
                opacity: 0.2;
            }
            80% {
                transform: scale(1.6);
                opacity: 0.1;
            }
            100% {
                transform: scale(1.8);
                opacity: 0.0;
            }
        }
        #wrapper
        {
            position:relative;
            display: inline-block;
            margin:100px;
        }
        #circle
        {
            position:absolute;
            top:-12px;
            left:-12px;
            width:50px;
            height:50px;
            border:12px solid #A8E957;
            border-radius:62px;
            opacity: 0;
        }
        #wrapper:hover div
        {
            animation: circle 1s ease-out;
            animation-iteration-count: infinite;
        }
    </style>
</head>
<body>
    <div id="wrapper">
        <div id="circle"></div>
        <img src="img/icon.png" alt="">
    </div>
</body>
</html>

浏览器预览效果如下图所示。

分析：

脉冲动画的关键是使用transform:scale()来实现圆圈的放大，并且在放大的过程中改变元素的透明度。

当鼠标移到元素上面时，会循环播放脉冲动画。这个效果非常棒，很可能在你的开发中就会用到。