Pulsating effect on icon in HTML5 with CSS
<p>I have an element </p>

<pre><code>&lt;a class="fa fa-user icon" href="#"&gt;&lt;/a&gt;
</code></pre>

<p>My requirement is to have a pulsing effect whenever the mouse is on top of it.</p>

<p>My CSS is something like this.</p>

<pre><code>.icon:hover{
    -webkit-animation: pulse 2s ease-in;
    -moz-animation: pulse 2s ease-in;
     animation: pulse 2s ease-in;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}


@keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    opacity: 0.0;
 }
 25% {
    -webkit-transform: scale(1.35);
    opacity: 0.1;
 }
 50% {
    -webkit-transform: scale(1.7);
    opacity: 0.3;
 }
 75% {
    -webkit-transform: scale(2.05);
    opacity: 0.5;
 }
 100% {
    -webkit-transform: scale(2.4);
    opacity: 0.0;
 }
}
</code></pre>

<p>The effect works fine but the thing is the original icon disappears. I want the original icon to remain visible while the pulsating effect is happening to make it stand out while the person is holding the mouse on top of it.</p>

<p>Do I need to overlay the original div with a new icon?</p>

<p>JSFiddle is available: <a href="https://jsfiddle.net/3bu8fxnp/9/" rel="nofollow noreferrer">https://jsfiddle.net/3bu8fxnp/9/</a></p>