title: Css3 animation plays twice instead of once
body: <p>I have integrated a css transition effect into my Wordpress loop (I used Masonry as well, maybe that is where the conflict is). The animation is playing twice rather than just the once which is irritating as I can't work out how to make it play once smoothly. I used some js scripts and css3 based on this tutorial:
  <a href="http://tympanus.net/codrops/2013/07/02/loading-effects-for-grid-items-with-css-animations/" rel="nofollow">http://tympanus.net/codrops/2013/07/02/loading-effects-for-grid-items-with-css-animations/</a></p>
  
  <p>Here is the link to the page that has the double animation:
  <a href="http://crippslawtest.co.uk/?post_type=cripps_staff&amp;Department=accounting" rel="nofollow">http://crippslawtest.co.uk/?post_type=cripps_staff&amp;Department=accounting</a></p>
  
  <pre><code>    &lt;script src="http://crippslawtest.co.uk/wp-content/themes/CrippsTheme/js2/masonry.pkgd.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://crippslawtest.co.uk/wp-content/themes/CrippsTheme/js2/imagesloaded.js"&gt;&lt;/script&gt;
  &lt;script src="http://crippslawtest.co.uk/wp-content/themes/CrippsTheme/js2/classie.js"&gt;&lt;/script&gt;
  &lt;script src="http://crippslawtest.co.uk/wp-content/themes/CrippsTheme/js2/AnimOnScroll.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  new AnimOnScroll( document.getElementById( 'lazy' ), {
          minDuration : 0.4,
          maxDuration : 0.7,
          viewportFactor : 1
      } );
  </code></pre>
  
  <p>Here is my css3:</p>
  
  <pre><code>    .masonry-brick {
      -webkit-transform: translateY(200px);
      -moz-transform: translateY(200px);
      transform: translateY(200px);
      -webkit-animation: moveUp 0.65s ease forwards;
      -moz-animation: moveUp 0.65s ease forwards;
      animation: moveUp 0.65s ease forwards;
  }
  @-webkit-keyframes moveUp {
      to { -webkit-transform: translateY(0); opacity: 1; }
  }
  @-moz-keyframes moveUp {
      to { -moz-transform: translateY(0); opacity: 1; }
  }
  @keyframes moveUp {
      to { transform: translateY(0); opacity: 1; }
  }
  </code></pre>
  
  <p>Here is my Masonry JS:</p>
  
  <pre><code>if ( $.isFunction( $.fn.masonry ) ) {
  $( '#people-transition' ).masonry( {
      itemSelector: '.people-transition',
      columnWidth: function( containerWidth ) {
          return containerWidth / 4;
      },
      gutterWidth: 0,
      isResizable: true,
      isRTL: $( 'body' ).is( '.rtl' )
  } );
  </code></pre>
  
  <p>}</p>
  
  <p>This is my content area:</p>
  
  <pre><code>&lt;div class="col-md-3 spacetop masonry-brick people-transition"&gt;
      &lt;a href='&lt;?php echo get_permalink($post-&gt;ID); ?&gt;'&gt;&lt;img class="lazy" class="" src="&lt;?php the_sub_field('image'); ?&gt;"&gt;&lt;/a&gt;
      &lt;h2 class="staffname"&gt;
          &lt;?php echo get_post_meta($post-&gt;ID,'staff_name',true); ?&gt;
      &lt;/h2&gt;
      &lt;h2 class="staffrole"&gt;
          &lt;?php echo get_post_meta($post-&gt;ID,'staff_role',true); ?&gt;
      &lt;/h2&gt;
      &lt;h2 class="staffnumber"&gt;
          &lt;?php the_sub_field('telephone_number'); ?&gt;
      &lt;/h2&gt;
      &lt;h2 class="staffemail"&gt;
          &lt;?php the_sub_field('email_address'); ?&gt;
      &lt;/h2&gt;
  &lt;/div&gt;
  </code></pre>