2
私は現在、Webデザインを一から学習しており、アニメーション、特に@keyframesを試しています。私は当初はクロムを使っていたのですが、これはすべてのブラウザでうまくいくという愚かな前提でした。クロム、オペラ、ファイアフォックスで動作するより複雑なアニメーションをテストした後、私はInternet Explorer/Edgeを試して、不透明アニメーションを使用しましたが、私が翻訳に使った方法はありませんでした。私は、リストアイテムを "移動"するためにリストアイテムの左の値を編集しています。 HTML：開始時にキーフレームアニメーションで"left"を動きとして使用する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"に変更しようとしましたが、これも機能しませんでした。私はブラウザが「左」をどのように扱うのかを誤解しているので、それは問題だと思う。助けのための
感謝:)