Css transition not working

问题

I have a scenario where on button click transition should happen.

These are the transitions which were applied. In chrome browser it is working good, but in IE11 when tried the transitions aren't getting applied.

I have applied CSS like below:

div{
    width:100px;
    height:100px;
    background:red;
    transition-property: right, left;
    transition-duration: 2s;
    -webkit-transition-property: right, left; /* Safari */
    -webkit-transition-duration: 2s; /* Safari */
    -ms-transition-property: right, left; /* Safari */
    -ms-transition-duration: 2s; /* Safari */
    position:absolute;
    right:calc(100% - 100px);
}

div:hover{
    right:0px;
}

<div></div>

Any help would be appreciated. DEMO

回答1:

As mentioned in another answer, IE11 has issues applying a transition to a property if one or both of its values are set using calc.

One workaround would be to set the second value of the calculation using a transform, however, the result may not match your desired animation completely. Note that the percentage used in the translatex function here is relative to the width of the element.

div{
    background:red;
    height:100px;
    width:100px;
    position:absolute;
    right:100%;
    transform:translatex(100%);
    transition-duration:2s;
    transition-property:right,transform;
}
div:hover{
    right:0;
    transform:translatex(0);
}

<div></div>

回答2:

It's because you use calc() (see Known issues tab):

IE11 does not support transitioning values set with calc()

This example works:

div {
    width: 100px;
    height: 100px;
    background: red;
    -webkit-transition-property: right, left;
    -webkit-transition-duration: 2s;
    -ms-transition-property: right, left;
    -ms-transition-duration: 2s;
    transition-property: right, left;
    transition-duration: 2s;
    position: absolute;
    right: 80%;
}

div:hover {
    right: 0;
}

<div></div>

JSFiddle

回答3:

According to the compatibility table you don't need to use prefix -ms-.

Chrome: no prefix for 26.0 for 4.0 use -webkit-

IE: no prefix for 10.0

Mozilla: no prefix for 16.0 for 4.0 use -moz-

Safari: no prefix for 6.1 for 3.1 use -webkit-

Opera 12.1 for 10.5 use -o-

来源：https://stackoverflow.com/questions/41804100/css-transition-not-working