title: Same animation Multiple Times using animate.css
body: <p>I am trying to pull the following along. Please Help.</p>
  
  <p>The requirement is to use:
  1. Animate.css
  2. jquery-1.10.1.min.js</p>
  
  <p>From the Animate.css only the expand open animation needs to be used. The requirement is for a watch store at my local. They want their clients to be able to try the watch on their hand (something similar to www.lenskart.com effect).</p>
  
  <p>I am able to run the code as described below, for only one animation (i.e. expandOpen) at a time on the same page.</p>
  
  <p>The page is to be designed in the fashion shown in the image: <img src="https://i.stack.imgur.com/65vbc.png" alt="Page Setup"></p>
  
  <p>There are multiple watches to be displayed, as in the image. The effect of expandOpen needs to be implemented on each watch in order to try them on the wrist.</p>
  
  <p>Currently, when I want to try a watch (say the 1st one) it animates perfectly. But when i want to animate the second watch, it doesnt work.</p>
  
  <p>I would appreciate any help on getting the same effect of expandOpen implemented on akll the buttons, possibly without page refresh.</p>
  
  <p>My HTML code is:
  {</p>
  
  <pre><code>&lt;section id="animation"&gt;
          &lt;div class="animation-container"&gt;
              &lt;div id="object" class="animate"&gt;&lt;/div&gt;
              &lt;img src="images/hand_watches.png" /&gt;
          &lt;/div&gt;
      &lt;/section&gt;
  
      &lt;section id="actions"&gt;
          &lt;div class="container"&gt;
              &lt;h2&gt;Try the Watch&lt;/h2&gt;
              &lt;a href="#" id="expandOpenBtn" class="button"&gt;&lt;img src="images/watch1.png"&gt;&lt;br&gt;Try Me!&lt;/a&gt;          
              &lt;a href="#" id="expandOpenBtn" class="button"&gt;&lt;img src="images/watch1.png"&gt;&lt;br&gt;Try Me!&lt;/a&gt;          
              &lt;a href="#" id="expandOpenBtn" class="button"&gt;&lt;img src="images/watch1.png"&gt;&lt;br&gt;Try Me!&lt;/a&gt;          
              &lt;a href="#" id="expandOpenBtn" class="button"&gt;&lt;img src="images/watch1.png"&gt;&lt;br&gt;Try Me!&lt;/a&gt;          
              &lt;a href="#" id="expandOpenBtn" class="button"&gt;&lt;img src="images/watch1.png"&gt;&lt;br&gt;Try Me!&lt;/a&gt;          
          &lt;/div&gt;
      &lt;/section&gt;
  
      &lt;script&gt;
          $('#expandOpenBtn').click(function() {
              $(this).each(function(){
                      $('#object').removeClass('animate expandOpen');             
                      $('#object').addClass("animate expandOpen");
                  });
          }); 
      &lt;/script&gt;
  </code></pre>
  
  <p>}</p>
  
  <p>CSS Code is for animation is:
  {</p>
  
  <pre><code>.expandOpen{
      animation-name: expandOpen;
      -webkit-animation-name: expandOpen; 
  
      animation-duration: 1.2s;   
      -webkit-animation-duration: 1.2s;
  
      animation-timing-function: ease-out;    
      -webkit-animation-timing-function: ease-out;    
  
      visibility: visible !important; 
  }
  
  @keyframes expandOpen {
      0% {
          transform: scale(1.8);      
      }
      50% {
          transform: scale(0.95);
      }   
      80% {
          transform: scale(1.05);
      }
      90% {
          transform: scale(0.98);
      }   
      100% {
          transform: scale(1);
      }           
  }
  
  @-webkit-keyframes expandOpen {
      0% {
          -webkit-transform: scale(1.8);      
      }
      50% {
          -webkit-transform: scale(0.95);
      }   
      80% {
          -webkit-transform: scale(1.05);
      }
      90% {
          -webkit-transform: scale(0.98);
      }   
      100% {
          -webkit-transform: scale(1);
      }                   
  }
  </code></pre>
  
  <p>}</p>
  
  <p>jQuery Used is:
  jQuery v1.10.1.js</p>
  
  <p>Images used:
  1. Hand <img src="https://i.stack.imgur.com/3Cp75.png" alt="Hand to try watch on">
  2. <img src="https://i.stack.imgur.com/iTXXX.png" alt="Watch"></p>
  
  <p>The person should be able to click one watch and see it expandOpen on the wrist displayed. And should be able to do this multiple times.</p>