title: Why does a CSS transition not work well with another animation based on jQuery's animate method?
body: <p>I have a button that I wish to move when it is clicked, and while moving it should also flip. So there are two animations that take place at the same time, and have the same duration. I also have a CSS <code>transition</code> set up for all the properties of the button. It seems to me that only the CSS scale transform works when I use both jQuery's <code>animate</code> method and the CSS transition effect. When I remove one of the animations, the other one works well.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// find elements
  var button = $("button");
  
  // handle click
  button.on("click", function() {
    button.css({
      "transform": "scaleX(0)"
    });
    
   // the bug: the following animation is not visible
    button.animate({
      "top": "-100px" // I tried without "px" too
    }, 0.15 * 1000);
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    background: #20262E;
    padding: 20px;
    font-family: Helvetica;
  }
  
  button {
    background: #0084ff;
    border: none;
    border-radius: 5px;
    padding: 8px 14px;
    font-size: 15px;
    color: #fff;
    
    position: relative;
    transition: all 0.15s;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div&gt;
    &lt;p&gt;Hello World&lt;/p&gt;
    &lt;button&gt;Click me&lt;/button&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The JSFiddle is <a href="https://jsfiddle.net/silviubogan/w6sx3r5c/" rel="nofollow noreferrer">here</a>.</p>
  
  <p>Thank you.</p>