title: CSS3 Animation conflicting with CSS3 transition that's triggered by jQuery?
body: <p>I set up a div so that on click of a button the div would expand upwards to view more content. On second click the button would slide down. I used JS to do this and it works fine.</p>
  
  <p>Secondly I have added an animation to the same div so that at certain points within the animation the div slides up and down. As soon as I added this the animation works fine but the transition and on click of the button to slide the div up/down no longer works and I can't understand why?</p>
  
  <p>Below is the code with both transition and animation applied to the div. There are two fiddles one showing the jQuery slide up/down on its own and the second demonstrating the code below.</p>
  
  <p>Any help would really be appreciated. </p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="wrapper"&gt;
         &lt;div class="content-wrapper"&gt;
             &lt;div class="padLeft"&gt;
                  &lt;h2&gt;Project Title&lt;/h2&gt;
                  &lt;div class="crossRotate"&gt; Open &lt;/div&gt;
             &lt;/div&gt;
             &lt;div class="padLeft"&gt;
                  &lt;p&gt;Paragraph Goes Here&lt;/p&gt;
                  &lt;h3&gt;Play Video&lt;/h3&gt;
             &lt;/div&gt;
         &lt;/div&gt;
  &lt;/div&gt;    
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.wrapper {
      width: 100%;
      height: 100px;
      position: absolute;
      overflow: hidden;
      margin: 0;
      padding:0;
      z-index: 1;
  }
  
  @-webkit-keyframes titledrop {
      0%, 25%, 50%, 75%, 100%{ bottom: -215px;}
      5%, 20%, 30%, 45%, 55%, 70%, 80%, 95%{ bottom: -90px;}
  }
  
  @-moz-keyframes titledrop {
      0%, 25%, 50%, 75%, 100%{ bottom: -215px;}
      5%, 20%, 30%, 45%, 55%, 70%, 80%, 95%{ bottom: -90px;}
  }
  
  @keyframes titledrop {
      0%, 25%, 50%, 75%, 100%{ bottom: -215px;}
      5%, 20%, 30%, 45%, 55%, 70%, 80%, 95%{ bottom: -90px;}
  }
  
  .content-wrapper {
      position: absolute;
      z-index: 999;
      background: red;
      bottom: -90px;
      width: 100%;
      -webkit-animation: titledrop 60s cubic-bezier(0.19, 1, 0.22, 1) infinite;
      -moz-animation: titledrop 60s cubic-bezier(0.19, 1, 0.22, 1) infinite;
      -o-animation: titledrop 60s cubic-bezier(0.19, 1, 0.22, 1) infinite;
      -ms-animation: titledrop 60s cubic-bezier(0.19, 1, 0.22, 1) infinite;
      animation: titledrop 60s cubic-bezier(0.19, 1, 0.22, 1) infinite;
      -webkit-transition: bottom 1s ease-in;
      -moz-transition: bottom 1s ease-in; 
      -o-transition: bottom 1s ease-in;
      -ms-transition: bottom 1s ease-in;
      transition: bottom 1s ease-in;  
  }
  
  .crossRotate {
      position: absolute;
      background-color: blue;
      z-index: 1;
      cursor: pointer;
  }
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>var clicked=true;
  $(".crossRotate").on('click', function() {
      if(clicked) {
          clicked=false;
          $(".content-wrapper").css({"bottom": "-90px"});
      } else {
          clicked=true;
          $(".content-wrapper").css({"bottom": "0"});
      }
  });
  </code></pre>
  
  <p>jsFiddle One - <a href="http://jsfiddle.net/8ZFMJ/64/" rel="nofollow noreferrer">http://jsfiddle.net/8ZFMJ/64/</a></p>
  
  <p>jsFiddle Two - <a href="http://jsfiddle.net/8ZFMJ/63/" rel="nofollow noreferrer">http://jsfiddle.net/8ZFMJ/63/</a></p>