【发布时间】：2017-05-10 16:08:31
【问题描述】：
我目前正在从头开始学习网页设计，并已开始尝试动画，特别是 @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" 基于单独的帖子，但这也没有用。我认为这是一个问题，因为我误解了浏览器如何处理“左”。
感谢您的帮助:)
【问题讨论】：
标签： html css internet-explorer microsoft-edge