CSS transitions with calc() do not work in IE10+

Question

I am animating a container on mouseover from right to the left with CSS transitions. This works fine in all browsers except Internet Explorer. The reason is that I am using (and need to use) calc() in my CSS left property. I created a live demo here: Live Demo The CSS looks like this: ``` div { background: red; width: 100px; height: 100px; position: absolute; top: 100px; left: 90%; -webkit-transition: left 0.7s cubic-bezier(0.77, 0, 0.175, 1); -moz-transition: left 0.7s cubic-bezier(0.77, 0, 0.175, 1); -o-transition: left 0.7s cubic-bezier(0.77, 0, 0.175, 1); transition: left 0.7s cubic-bezier(0.77, 0, 0.175, 1); } div.translate-less { left: calc(90% - 4rem) } ``` I am adding the class .translate-less on mouseover with jQuery: ``` $(document) .on( 'mouseenter', 'div', function(){ $(this).addClass('translate-less') }) .on( 'mouseleave', 'div', function(){ $('div').removeClass('translate-less'); }) ``` Now I would like to have a smooth transition in Internet Explorer. For that, I would…

Accepted Answer

Maybe `transform: translateX()` can provide a work-around. Depending on the circumstances, using transforms and the right property might be better:

```
right: 10%;
transform: translateX(-4rem); 
```

Here is a modified version of your script: http://jsfiddle.net/xV84Z/1/.

Alternatively, while you can't use `calc()` within a `translateX()` in IE (because of a bug), you can apply multiple `translateX()`s in a transform:

```
/* This */
transform: translateX(90%) translateX(-4rem);
/* is equivalent to this */
transform: translateX(calc(90% - 4rem));
```

(However, 90% in this case means 90% of the target, not the parent.)

CSS transitions with calc() do not work in IE10+

Solution

Problem