Css переход не работает

Question

У меня есть сценарий, в котором при нажатии кнопки переход должен произойти.

Это переходы, которые были применены. В браузере Chrome он работает хорошо, но в IE11 при попытке перехода не применяются.

Я применил CSS, как показано ниже:

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>

Любая помощь будет оценена. DEMO

Answer 1

Как уже упоминалось в другом ответе, IE11 имеет проблемы, применяющих transition к свойству, если один или оба его значения устанавливаются с помощью calc.

Одним из способов решения проблемы было бы установить второе значение вычисления с использованием transform, однако результат может полностью не соответствовать желаемой анимации. Обратите внимание, что процент, используемый в функции translatex, относится к ширине элемента.

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>

Answer 2

В соответствии с таблицей совместимости вам не нужно использовать префикс -ms-.

Хром: без префикса для 26.0 для 4.0 использования -webkit-

IE: без префикса 10,0

Mozilla: без префикса для 16.0 для 4.0 использования -moz-

Safari: без префикса для 6.1 для 3.1 использование -webkit-

Опера 12.1 для 10.5 использование -o-

Answer 3

Это потому, что вы используете calc() (см Known issues вкладку):

IE11 не поддерживает переход значений, установленных с известково()

Этот пример работает:

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