Using Calc() to Transition Width and Height in Ie

Using calc() to transition width and height in IE

Seems like I have found a workaround after playing a bit (at least it works for IE10 and IE11). I have used the max-width property instead for calc() method. CSS for hover:

.notworks:hover {
    width: 100%;
    max-width: calc(100% - 50px);
    height: 175px;
}

Example

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

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.)

How to translate or transition dynamically without using calc() css

Is will be possible while using margin-left property. Without using calc function, this will helps to calculate left.

Internet Explorer 10 css3 transition height not happening with parent padding-bottom value

Try making the following changes to #inside:

Add min-width: 30px; and min-height: 30px;
Change width: 30px; to width: 1%; and height: 30px; to height: 1%;

#container:hover #inside {    height: 100%;    width: 100%;}#container {    background: black;    height: 0;    padding-bottom: 30%;    position: relative;    width: 30%;}#inside {    background: pink;    height: 1%;    left: 0;    min-height: 30px;    min-width: 30px;    position: absolute;    top: 0;    -webkit-transition: width 0.4s, height 0.4s;    -moz-transition: width 0.4s, height 0.4s;    -o-transition: width 0.4s, height 0.4s;    -ms-transition: width 0.4s, height 0.4s;    transition: width 0.4s, height 0.4s;    width: 1%;}

<div class="out" id="container">    <div id="inside"></div></div>

How can I make transition property work in IE by using calc properties?

What about this? Works like your code snippet (in my opinion), it's OK in IE10/IE11. Or I didn't understand your real situation.

html, body {    width: 100%;    height: 100%;}
div {    position: fixed;    right: 0;    width: 250px;    bottom: 0;    background: #1c8080;    top: 158px;    color: #fff;    text-align: center;    padding-top: 40px;    font-size: 18px;    border: 1px solid #000;        -webkit-transition: all .3s;    -moz-transition: all .3s;    transition: all .3s;}
div:hover {    top: 58px;}
.bottom {    position: absolute;    bottom: 15px;    width: 100%;    font-size: 26px;}

<div>    <p>Height's transition</p>    <p>Works fine in Chrome, FF</p>    <p class="bottom">But not in IE</p></div>

Not possible to use CSS calc() with transform:translateX in IE

This:

transform: translateX(100%) translateX(-50px);

gets compiled at parse time, but calc expression here :

transform: translateX(calc(100% - 50px));

has to be interpreted each time when browser needs that value. Result of the expression can be cached but I wouldn't rely on browsers to use such kind of optimizations.

So first one is better in the sense that a) it works now, b) is effective and c) it will work in future until the spec will be in effect.

Positioning calc() smoothly into its correct position

No need to use calc for only percentages, but here's an example of a class change triggering a CSS transition 1 second after the code runs:

setTimeout(function(){  document.getElementById('d').className = 'ready';}, 1000);

#d {background: #ccc; position: absolute; transition: top 1s linear; top: 0}#d.ready {top: calc(35%);}

<div id="d">DIV</div>

Using Calc() to Transition Width and Height in Ie