title: keyframe animation on hover
body: <p>I have been following an example of CSS keyframe animation with the following code:-</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.pulse-animation {
    margin: 50px;
    display: block;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #ff8717;
    cursor: pointer;
    animation: pulse 2s infinite;
    float: left;
  }
  
  .pulse-animation:hover {
    animation: none;
  }
  
  @keyframes pulse {
    0% {
      -moz-box-shadow: 0 0 0 0 rgba(204, 169, 44, 0.4);
      box-shadow: 0 0 0 0 rgba(204, 169, 44, 0.4);
    }
    70% {
      -moz-box-shadow: 0 0 0 30px rgba(204, 169, 44, 0);
      box-shadow: 0 0 0 30px rgba(204, 169, 44, 0);
    }
    100% {
      -moz-box-shadow: 0 0 0 0 rgba(204, 169, 44, 0);
      box-shadow: 0 0 0 0 rgba(204, 169, 44, 0);
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;span class="pulse-animation"&gt;&lt;/span&gt;
  &lt;img class="pulse-animation" src="https://randomuser.me/api/portraits/women/1.jpg" /&gt;
  &lt;img class="pulse-animation" src="https://randomuser.me/api/portraits/women/2.jpg" /&gt;
  &lt;img class="pulse-animation" src="https://randomuser.me/api/portraits/women/3.jpg" /&gt;
  &lt;img class="pulse-animation" src="https://randomuser.me/api/portraits/women/4.jpg" /&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I try to make the animation working for hover only and it didn't work, I try also to change the hover animation and it still not working so can anyone help.</p>