title: CSS Transition Jumpy / Jerky
body: <p>I have been using the <code>scale()</code> property, which was working fine until a few weeks ago. After the browsers got updated, now I see a jerky/jumpy animation, can someone please point out where exactly my problem is?</p>
  
  <p>Please take a look at the following <strong><a href="http://jsfiddle.net/3kkpa4v5/" rel="nofollow">jsFiddle</a></strong>; in the rollover, the ICON (which is showing "A") will slide in from the bottom and scale at the same time, but it goes down to the starting point creating a jerky/jumpy animation effect.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.ca-menu {
      padding:0;
      margin:20px auto;
      width: 1020px;
  }
  .ca-menu li {
      width: 200px;
      height: 300px;
      overflow: hidden;
      position: relative;
      float:left;
      background: #fff;
      -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
      -moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
      box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
      margin-right: 4px;
      -webkit-transition: all 300ms linear;
      -moz-transition: all 300ms linear;
      -o-transition: all 300ms linear;
      -ms-transition: all 300ms linear;
      transition: all 300ms linear;
  }
  .ca-menu li:last-child {
      margin-right: 0px;
  }
  .ca-menu li a {
      text-align: left;
      width: 100%;
      height: 100%;
      display: block;
      color: #333;
      position: relative;
  }
  .ca-icon {
      font-family:'WebSymbolsRegular', cursive;
      font-size: 60px;
      color: #333;
      text-shadow: 0px 0px 1px #333;
      line-height: 150px;
      position: absolute;
      width: 100%;
      height: 50%;
      left: 0px;
      top: 0px;
      text-align: center;
      -webkit-transition: all 400ms linear;
      -moz-transition: all 400ms linear;
      -o-transition: all 400ms linear;
      -ms-transition: all 400ms linear;
      transition: all 400ms linear;
  }
  .ca-content {
      position: absolute;
      left: 0px;
      width: 100%;
      height: 50%;
      top: 50%;
  }
  .ca-main {
      font-size: 30px;
      opacity: 0.8;
      text-align: center;
      -webkit-transition: all 200ms linear;
      -moz-transition: all 200ms linear;
      -o-transition: all 200ms linear;
      -ms-transition: all 200ms linear;
      transition: all 200ms linear;
  }
  .ca-sub {
      text-align:center;
      font-size: 14px;
      color: #666;
      line-height: 40px;
      opacity: 0.8;
      position: absolute;
      bottom: 0;
      width: 100%;
      -webkit-transition: all 200ms linear;
      -moz-transition: all 200ms linear;
      -o-transition: all 200ms linear;
      -ms-transition: all 200ms linear;
      transition: all 200ms linear;
  }
  .ca-menu li:hover {
      background-color: #000;
  }
  .ca-menu li:hover .ca-icon {
      color: #ff2020;
      -webkit-animation: moveFromBottom 300ms ease;
      -moz-animation: moveFromBottom 300ms ease;
      -ms-animation: moveFromBottom 300ms ease;
  }
  .ca-menu li:hover .ca-main {
      color: #ff2020;
      -webkit-animation: smallToBig 300ms ease;
      -moz-animation: smallToBig 300ms ease;
      -ms-animation: smallToBig 300ms ease;
  }
  .ca-menu li:hover .ca-sub {
      color: #000;
      background-color: #ff2020;
      -webkit-animation: moveFromBottom 500ms ease;
      -moz-animation: moveFromBottom 500ms ease;
      -ms-animation: moveFromBottom 500ms ease;
  }
  @-webkit-keyframes smallToBig {
      from {
          -webkit-transform: scale(0.1);
      }
      to {
          -webkit-transform: scale(1);
      }
  }
  @-moz-keyframes smallToBig {
      from {
          -moz-transform: scale(0.1);
      }
      to {
          -moz-transform: scale(1);
      }
  }
  @-ms-keyframes smallToBig {
      from {
          -ms-transform: scale(0.1);
      }
      to {
          -ms-transform: scale(1);
      }
  }
  @-webkit-keyframes moveFromBottom {
      from {
          -webkit-transform: translateY(100%);
      }
      to {
          -webkit-transform: translateY(0%);
      }
  }
  @-moz-keyframes moveFromBottom {
      from {
          -moz-transform: translateY(100%);
      }
      to {
          -moz-transform: translateY(0%);
      }
  }
  @-ms-keyframes moveFromBottom {
      from {
          -ms-transform: translateY(100%);
      }
      to {
          -ms-transform: translateY(0%);
      }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul class="ca-menu"&gt;
    &lt;li&gt;
      &lt;a href="#"&gt;
        &lt;span class="ca-icon"&gt;A&lt;/span&gt;
        &lt;div class="ca-content"&gt;
          &lt;h2 class="ca-main"&gt;Exceptional Service&lt;/h2&gt;
          &lt;h3 class="ca-sub"&gt;Personalized to your needs&lt;/h3&gt;
        &lt;/div&gt;
      &lt;/a&gt;
    &lt;/li&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>