title: Disable CSS animation on window resize
body: <p>I have a CSS animation that makes the logo big on window load and then shrinks it down to size. Works great, however if I shrink down the window and then make it big again, the animation replays. Is there someway I can incorporate jQuery (or a CSS fix) that will disable the animation after it loads once? I thought I could do something with <code>animation-play-state: paused;</code> but I want it to play once so I'm not sure how I'd go about that. </p>
  
  <p>Maybe onLoad assign class and then unassign class after animation is completed. Just thinking that might work? Anyone have any thoughts on how I'd go about that? </p>
  
  <pre><code>#logo {
      max-width: 260px;
      height: auto;
      width: 40%;
      -webkit-animation: animate 3s ease;
  -moz-animation: animate 3s ease;
  -ms-animation: animate 3s ease;
  -o-animation: animate 3s ease;
  }
  </code></pre>
  
  <p>Thanks! </p>