title: CSS3 not transitioning ease-out with CSS Circular Progress Bars
body: <p>My transition, well, doesn't transition.</p>
  
  <p><a href="https://gist.github.com/TadahTech/0915cd6fc22fa27a94a4" rel="nofollow">https://gist.github.com/TadahTech/0915cd6fc22fa27a94a4</a></p>
  
  <p>I am completely unsure why there isn't a transition happening, but I assume it's a 
  simple answer. I've been staring at this for too long and was hoping for some fresh eyes on the issue.</p>
  
  <pre><code>section.progress-container {
      display: block;
      height: 200px;
      width: 200px;
      margin: 2em auto;
      position: relative;;
  }
  
  circle#empty {
      stroke: #EDEDED;
      stroke-width: 2em;
  }
  
  circle#percent-loaded {
      transition: stroke-dashoffset 1.6 ease-in;
      transition-delay: 1s;
      stroke: blue;
      stroke-width: 2em;
  }
  </code></pre>
  
  <p>The JS</p>
  
  <pre><code>$(function() {
  
    calculateProgress = function(percentLoaded) {
      var $percentLoadedCircle = $("circle#percent-loaded");
  
      var radius = $percentLoadedCircle.attr("r");
  
      var circumference = Math.PI * (radius * 2);
  
      var arcPercent = ((100 * percentLoaded) / 100);
  
      var arcLengthOffset = arcPercent * circumference;
  
      $percentLoadedCircle.css({
        strokeDashoffset: arcLengthOffset
      });
    }
    calculateProgress(100);
  });
  </code></pre>
  
  <p>Index page</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Countdown Test Site&lt;/title&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=0.1" /&gt;
      &lt;link rel="stylesheet" type="text/css" media="all" href="css/style.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;section class="progress-container"&gt;
          &lt;svg height="240" width="240" viewport="0 0 100 100" xmlns="http://www.w3.org/2000/svg"&gt;
              &lt;circle id="empty" r="100" cx="120" cy="120" fill="transparent" stroke-dasharray="629" stroke-dashoffset="0"&gt;&lt;/circle&gt;
              &lt;circle id="percent-loaded" r="100" cx="120" cy="120" fill="transparent" stroke-dasharray="629" stroke-dashoffset="0"&gt;&lt;/circle&gt;
          &lt;/svg&gt;
      &lt;/section&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"&gt;&lt;/script&gt;
  
      &lt;script type="text/javascript" src="js/app.js"&gt;&lt;/script&gt;&lt;/body&gt;
  &lt;/html&gt;
  </code></pre>