title: Make a rotate animation: start and end slowly, but fast in the middle
body: <p>I want to have a spinning animation applied to an element: the rotation should start slowly and then become faster and faster, then it will reach a point from where it will continue to be very fast and then <em>very slowly</em> go slower and slower until it will stop.</p>
  
  <p>The graph would look like this:</p>
  
  <pre><code>^ Speed
  |     ********
  |   **        ***
  |  *             ****
  | *                  ***
  | *                     ***
  +*-------------------------***-&gt; Time
  </code></pre>
  
  <p>How can I apply this path to the jQuery <code>animate</code> function?</p>
  
  <p>Currently I have this:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function spin() {
    var $myElm = $(".myClass");
  
    function rotate(degrees) {
      $myElm.css({
        '-webkit-transform': 'rotate(' + degrees + 'deg)',
        '-moz-transform': 'rotate(' + degrees + 'deg)',
        '-ms-transform': 'rotate(' + degrees + 'deg)',
        'transform': 'rotate(' + degrees + 'deg)'
      });
    }
    $({
      deg: 0
    }).animate({
      deg: 360 * 40
    }, {
      duration: 7000,
      step: function() {
        var deg = this.deg;
        rotate(deg);
      }
    });
  }
  
  spin();</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.myClass {
    position: fixed;
    top: 30px;
    left: 30px;
    height: 200px;
    width: 200px;
    background: red;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="myClass"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This works but it should have a smoother slowing down. How can I do that?</p>