2
我目前正在從頭開始學習網頁設計，並開始嘗試動畫，特別是@keyframes。我最初是在設計時使用chrome，並且做出了愚蠢的假設，這可以適用於所有瀏覽器。在測試了一個在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，所以你可以看到預期的效果和視覺差異互聯網內沒有效果探險家。我試圖根據單獨的帖子將meta標籤更改爲 http-equiv="X-UA-Compatible" content="IE=edge"，但這也不起作用。我認爲這是一個問題，因爲我誤解了瀏覽器如何處理「左」。
感謝您的幫助:)