В настоящее время я изучаю веб-дизайн с нуля и начал попытки анимации, в частности, @keyframes. Сначала я разрабатывал, только используя хром, и сделал глупое предположение, что это будет работать во всех браузерах. После тестирования более сложной анимации, которая работала в chrome, opera и firefox, я попробовал Internet Explorer/Edge и работал с обработкой непрозрачности, но метод, который я использовал для перевода, не выполнялся. Я просто редактирую левое значение элемента списка, чтобы «переместить» элементы списка. HTML:анимация ключевых кадров CSS с использованием «левого» движения в Internet explorer не работает
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-gb">
<head>
<meta content="text/html; charset=utf-8; width=device_width;" http-equiv="Content-Type" />
<title>Homepage</title>
<link rel="stylesheet" type="text/css" href="CSS\index\indexTesting.css"/>
</head>
<body>
<!--Navigation Bar-->
<div id="navigationBar">
<ul>
<li id="liAbout"><a>About</a></li>
<li id="liPortfolio"><a>Portfolio</a></li>
<li id="liServices"><a>Services</a></li>
<li id="liContact"><a>Contact</a></li>
<li id="liBlog"><a>Blog</a></li>
</ul>
</div>
<!--Navigation Bar-->
</body>
</html>
CSS с ключевым кадром анимацией в начале:
@keyframes listEntranceAnimation{
0%{
left:50%;
}
100%{
left:0;
}
}
@-o-keyframes listEntranceAnimation{
0%{
left:50%;
}
100%{
left:0;
}
}
@-webkit-keyframes listEntranceAnimation{
0%{
left:50%;
}
100%{
left:0;
}
}
@-moz-keyframes listEntranceAnimation{
0%{
left:50%;
}
100%{
left:0;
}
}
@-ms-keyframes listEntranceAnimation{
0%{
left:50%;
}
100%{
left:0;
}
}
html, body{
height:100%;
width:100%;
}
body{
margin:0;
padding:0;
border:0;
background-color:#0f0f0f;
}
#navigationBar{
position:relative;
margin:0;
padding:0;
height:100%;
top:0;
left:0;
right:0;
width:100%;
}
#navigationBar ul{
position:relative;
margin:0;
padding:0;
overflow:hidden;
list-style-type:none;
display:table;
width:49.8%;
left:50%;
height:5%;
top:6px;
}
#navigationBar li{
position:relative;
top:0;
left:0;
right:8px;
margin:0;
padding:0;
display:table-cell;
vertical-align:middle;
width:20%;
-webkit-animation:listEntranceAnimation 4s ease 0s 1 normal forwards;
-o-animation:listEntranceAnimation 4s ease 0s 1 normal forwards;
-moz-animation:listEntranceAnimation 4s ease 0s 1 normal forwards;
animation:listEntranceAnimation 4s ease 0s 1 normal forwards;
-ms-animation:listEntranceAnimation 4s ease 0s 1 normal forwards;
}
#navigationBar li a{
margin:0;
padding:0;
display:block;
text-align:center;
z-index:100;
color:rgba(255,255,255,1);
}
Я также ссылаюсь в jsfiddle, так что вы можете увидеть визуальную разницу для предполагаемого эффекта и отсутствие эффекта в пределах Интернета исследователь. Я попытался изменить метатег на http-equiv="X-UA-Compatible" content="IE=edge" на основе отдельного сообщения, но это также не сработало. Я предполагаю, что это проблема из-за того, что я неправильно понимаю, как браузер имеет дело с «левым».
Спасибо за помощь :)