title: Highlight Animation Only Works Every Other Time the Button is Clicked
body: <p>When the <code>button</code> is clicked: the <code>div</code> element is highlighted green, and then the green fades away.  </p>
  
  <p>It works, but it only works <em>every other time</em>.  </p>
  
  <ul>
  <li>The 1st, 3rd, 5th... time you click the button the animation occurs.    </li>
  <li>The 2nd, 4th, 6th... time you click the button the animation <em>does not</em> occur.</li>
  </ul>
  
  <p><strong>Question</strong>: How can I make the animation occur <em>every time</em> the button is clicked?</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-js lang-js prettyprint-override"><code>$('button').on('click', function(){
    $('div').toggleClass("success-highlight-animation");
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/*********************************************/
  /*********************************************/
  /* Fades in success color, then fades it out */
  .success-highlight-animation {
    -moz-animation: highlight 2s ease 0s 1 alternate ;
    -webkit-animation: highlight 2s ease 0s 1 alternate;
    animation: highlight 2s ease 0s 1 alternate;
  }
  
  @-webkit-keyframes highlight {
    from { background-color: #dff0d8;}
    to {background-color: white;}
  }
  
  @-moz-keyframes highlight {
    from { background-color: #dff0d8;}
    to {background-color: white;}
  }
  // end .success-highlight-animation
  /*********************************************/
  /*********************************************/</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  
    &lt;button&gt;click&lt;/button&gt;
  
  
  &lt;div&gt;
    When the button is clicked this shows a highlight that slowly fades away.
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>