title: Transition not animating in IE9-11 when using calc
body: <p>I'm trying to get IE10 to animate a change in width of an element so that it pushes another panel out of the way. I have a <a href="http://jsbin.com/IxobULI/1/">JSBin</a> demonstrating the basic idea. On Chrome, it animates just fine when you click the open and close links. In IE10, however, it just jumps to open and close. I think I have all the neccessary prefixing in--anyone know why it's not animating?</p>
  
  <p>UPDATE: Tried giving the right side explicit pixel values for open and close states. Animated just fine. <em>shakes fist</em> Percentages....</p>
  
  <p>UPDATE 2: Apparently %-to-% works, as does px-to-px, and %-to-px, and px-to-% but %-to-whatever-calc-is failed</p>
  
  <p>UPDATE 3: Found <a href="https://connect.microsoft.com/IE/feedback/details/733978/css-animation-dont-accept-calc-as-property-values">this bug</a> at Connect, which seems to describe exactly this issue (except using keyframe animations instead of transitions). Status: "Resolved as Postponed". Damn it, IE.</p>
  
  <p><strong>HTML</strong>:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset=utf-8 /&gt;
  &lt;title&gt;JS Bin&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;section id="body-container"&gt;
        &lt;div id="left"&gt;
          &lt;div id="nav"&gt;
            &lt;h1&gt;Nav&lt;/h1&gt;
  
            &lt;a href="#right"&gt;
              Close
            &lt;/a&gt;
            &lt;a href="#"&gt;
              Open
            &lt;/a&gt;
          &lt;/div&gt;
          &lt;div id="left-content"&gt;
            LEFT
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div id="right"&gt;
          RIGHT
        &lt;/div&gt;
      &lt;/section&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>Less</strong>:</p>
  
  <pre class="lang-css prettyprint-override"><code>@nav-width: 54px;
  
  html, body {
    width: 100%;
    height: 100%;
  }
  
  #body-container {
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    height: 100%;
  
    #left,
    #right {
      height: 100%;
    }
  
    #left {
      -ms-flex: 1;
      flex: 1;
      display: -ms-flexbox;
      display: flex;
      background-color: red;
  
      #nav {
        width: @nav-width;
        height: 100%;
        background-color: yellow;
      }
  
      #left-content {
        -ms-flex: 1;
        flex: 1;
        background-color: orange;
      }
    }
  
    #right {
      width: 66%;
      background-color: blue;
      position: relative;
      -ms-transition: width 0.5s linear;
      transition: width 0.5s linear;
  
      &amp;:target {
        width: calc(~'100% - @{nav-width}');
      }
    }
  }
  </code></pre>
  
  <hr>
  
  <p>Simpler examples that show the issue with <code>calc</code> provided by other Stack Overflow users:</p>
  
  <ul>
  <li><a href="http://jsfiddle.net/p6f0d3wb/">http://jsfiddle.net/p6f0d3wb/</a></li>
  <li><a href="http://jsfiddle.net/v7wdaoq1/">http://jsfiddle.net/v7wdaoq1/</a></li>
  </ul>