我目前正在从零开始学习网页设计，并开始尝试制作动画，特别是@keyframes。我最初只是在使用 chrome 进行设计，并愚蠢地假设这适用于所有浏览器。在测试了在 chrome、opera 和 firefox 中工作的更复杂的动画后，我尝试了 Internet Explorer/Edge，不透明动画工作了，但我用于翻译的方法没有。我只是在编辑列表项的左值，以便“移动”列表项。 HTML:
<!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因此您可以在 Internet Explorer 中看到预期效果和没有效果的视觉差异。我试图将元标记更改为
http-equiv="X-UA-Compatible"content="IE=edge" 基于单独的帖子，但这也没有用。我认为这是一个问题，因为我误解了浏览器如何处理“左”。
感谢您的帮助:)
最佳答案
Here是解决方案:
#navigationBar ul{
position:relative;
margin:0;
padding:0;
overflow:hidden;
list-style-type:none;
display:table;
width:49.8%;
height:5%;
top:6px;
float: right;
-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{
position:relative;
top:0;
left:0;
right:8px;
margin:0;
padding:0;
display:table-cell;
vertical-align:middle;
width:20%;
}
它适用于 Edge 和 IE。
在 #navigationBar ul 中，我添加了 float: right; 并删除了 left: 50%;;并将动画代码从 #navigationBar li 移至 #navigationBar ul
关于html - 使用 "left"作为移动的 CSS 关键帧动画在 Internet Explorer 中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41327079/