Свойство CSS перехода поддерживает IE 10 +, при использовании его в браузере IE нам необходимо добавить префикс поставщика -ms-, например: -ms-transition: all 5s linear;
Кроме того, со ссылкой на переходный документ и свойство CSS-перехода . Я создал образец на моей стороне, кажется, что он не изменит местоположение элемента только с помощью свойства перехода CSS. В качестве обходного пути мы могли бы изменить местоположение элемента, используя Переход при наведении или Свойство CSS-анимации .
Пожалуйста, обратитесь к этому примеру :
<style>
.notch {
position: absolute;
left: calc(95vw - 37.5px);
top: calc(50% - 5px);
width: 75px;
height: 110px;
box-sizing: border-box;
font-size: 30px;
text-align: center;
line-height: 110px;
transition: all 5s linear;
-ms-transition: all 5s linear;
-webkit-transition: all 5s linear;
-moz-transition: all 5s linear;
-o-transition: all 5s linear;
-webkit-animation: mymove 5s linear; /* Safari 4.0 - 8.0 */
animation: mymove 5s linear;
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes mymove {
from {
left: 195vw;
}
to {
left: 95vw;
}
}
@keyframes mymove {
from {
left: 195vw;
}
to {
left: 95vw;
}
}
</style>
Вывод, как показано ниже:
