title: Using CSS3 Transitions and keyframes in JQuery .css()
body: <p>I'm trying to get CSS3 transitions to work in JQuery .css()</p>
  
  <p>Something simple like</p>
  
  <pre><code>.someDiv { opacity: 1; background: #fff; transition: width 2s; }
  </code></pre>
  
  <p>formats into</p>
  
  <pre><code>$( ".box" ).one( "click", function() {
  $(this).css({ "opacity": "1", "background": "#fff", "transition": "width 2s" });
  });
  </code></pre>
  
  <p>I know that much.<br>
  But how do you format CSS3 transitions that have nested keyframes to work with JQuery?</p>
  
  <pre><code>.fadeInDown {
   -webkit-animation-name: fadeInDown;  
   animation-name: fadeInDown;  }
  
  @keyframes fadeInDown {
  
  0% {
      opacity: 0;
      -webkit-transform: translate3d(0, -100%, 0);
       transform: translate3d(0, -100%, 0);
      }
  
  100% {
          opacity: 1;
          -webkit-transform: none;
          transform: none;
      }
  } 
  </code></pre>