title: CSS pie chart animation from 40% to 60%
body: <p>I try make a dynamic pie chart in CSS, it works pretty good unles I want to animate from less than 50% to more than 50% and vice et versa.</p>
  
  <p>Here is a codepen (I didn't find how to use SCSS in the stack's tool) :  <a href="http://codepen.io/mbrillaud/pen/NNgqYE" rel="nofollow">http://codepen.io/mbrillaud/pen/NNgqYE</a></p>
  
  <p>Is there a trick to avoid this effect ?</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="wrapper"&gt;
    &lt;div class="pie percent-10" id="pie"&gt;&lt;/div&gt;
    &lt;div class="border"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="buttons"&gt;
    &lt;button data-value="10"&gt;10%&lt;/button&gt;
    &lt;button data-value="20"&gt;20%&lt;/button&gt;
    &lt;button data-value="30"&gt;30%&lt;/button&gt;
    &lt;button data-value="40"&gt;40%&lt;/button&gt;
    &lt;button data-value="50"&gt;50%&lt;/button&gt;
    &lt;button data-value="60"&gt;60%&lt;/button&gt;
    &lt;button data-value="70"&gt;70%&lt;/button&gt;
    &lt;button data-value="80"&gt;80%&lt;/button&gt;
    &lt;button data-value="90"&gt;90%&lt;/button&gt;
    &lt;button data-value="100"&gt;100%&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>@import 'compass';
  body {
    background-color: #2c333b;
  }
  .wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    @include transform(translate(-50%, -50%));
    .pie,
    .border {
      box-sizing: border-box;
      position: absolute;
      top: 0;
      left: 0;
      width: 100px;
      height: 100px;
      border-radius: 50%;
    }
    .pie {
      background-color: #FDDED9;
      background-image: linear-gradient(to right, transparent 50%, #ff4081 0);
      &amp;::before {
          content: '';
          display: block;
          top: 0;
          left: 50%;
          width: 50%;
          margin-left: 50%;
          height: 100%;
          border-radius: 0 100% 100% 0 / 50%;
          background-color: inherit;
          transform-origin: left;
          transition: transform .2s linear;
      }
      &amp;.percent-10::before {
          transform: rotate(.1turn);
      }
      &amp;.percent-20::before {
          transform: rotate(.2turn);
      }
      &amp;.percent-30::before {
          transform: rotate(.3turn);
      }
      &amp;.percent-40::before {
          transform: rotate(.4turn);
      }
      &amp;.percent-50::before {
          transform: rotate(.5turn);
      }
      &amp;.percent-60::before {
          transform: rotate(.1turn);
          background-color: #ff4081;
      }
      &amp;.percent-70::before {
          transform: rotate(.2turn);
          background-color: #ff4081;
      }
      &amp;.percent-80::before {
          transform: rotate(.3turn);
          background-color: #ff4081;
      }
      &amp;.percent-90::before {
          transform: rotate(.4turn);
          background-color: #ff4081;
      }
      &amp;.percent-100::before {
          transform: rotate(.5turn);
          background-color: #ff4081;
        }
  
    }
    .border {
      border: 5px solid #FDDED9
    }
  }
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>$(document).ready(function() {
  
    var $pie = $('#pie'),
        className;
  
    $('button').on('click', function() {
      className = $pie.attr('class').match(/percent[\w-]*\b/);
      $pie
        .removeClass(className[0])
        .addClass('percent-' + $(this).data('value'));
    });
  });
  </code></pre>