title: Issue while using transitions + opacity change + overflow hidden
body: <p>If you see the code sample I have shared, you can see the overlay going outside the box. I traced the issue down to the <code>transition</code> attribute.</p>
  
  <p>I want to remove the content outside of the div. Overflow isn't working as it is supposed to. (removing <code>transition</code> works, but I would like to keep it if possible)</p>
  
  <p>Any help is appreciated</p>
  
  <p><a href="http://codepen.io/anon/pen/OVaxbP" rel="nofollow noreferrer">Codepen Link</a></p>
  
  <p><strong>CODE</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var timer = setInterval(function() {
    document.querySelector(".qs-timer-overlay").style.opacity = (document.querySelector(".qs-timer-overlay").style.opacity * 1) + 0.1;
    if (document.querySelector(".qs-timer-overlay").style.opacity * 1 == 1) {
      clearInterval(timer);
    }
  }, 1000);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.qs-main-header .qs-timer {
    padding: 13px 10px;
    min-width: 130px;
    text-align: center;
    display: inline-block;
    background-color: #dd8b3a;
    color: #FFF;
    font-size: 20px;
    border-radius: 50px;
    text-transform: uppercase;
    float: right;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .qs-main-header .qs-timer-overlay {
    z-index: 1;
    width: 10%;
    max-width: 100%;
    position: absolute;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #c7543e;
    opacity: 0.0;
    /* border-radius: 50px 50px 0px 50px; */
  }
  .qs-main-header .qs-timer-content {
    z-index: 2;
    position: relative;
  }
  .scale-transition {
    -webkit-transition: all 1s;
    transition: all 1s;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="qs-main-header"&gt;
    &lt;div class="qs-timer scale-transition ng-hide" ng-show="visibility.timer"&gt;
      &lt;div class="scale-transition qs-timer-overlay"&gt;&lt;/div&gt;
      &lt;div class="qs-timer-content ng-binding"&gt;0 &lt;span class="ng-binding"&gt;Sec(s)&lt;/span&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>