CSS 3動畫無法在任何瀏覽器中使用

這是一個簡單的學校項目網站。我在主頁的圖像滑塊上遇到了CSS動畫問題。它拒絕生成動畫，並且與瀏覽器網站檢查員進行檢查，結果顯示該規則未被「計算」（應用於）圖像。CSS 3動畫無法在任何瀏覽器中使用

下面是頁面的代碼：

<!DOCTYPE html> 
<head> 
    <title>Foo Bar Lorem Ipsum IS-3 | Home</title> 
    <link rel="stylesheet" href="stylesheets\home.css"> 
</head> 
<body> 
    <div id="wrapper"> 
    <header> 
    <div id="navbar"> 
    <ul> 
     <li><a href="home.html">Home</a></li> 
     <li><a href="about.html">About Us</a></li> 
     <li><a href="events.html">Events</a></li> 
     <li><a href="contact.html">Contact Us</a></li> 
    </ul> 
    </div> 
    <img src="images\header.png"> 
    <header> 
    <div class="slider"> 
    <ul> 
     <li><img src="images\law1.JPG" width="900" height="675" title="SLC Law 

Workshop"/> </li> 
     <li><img src="images\law2.JPG" width="900" height="675" title="SLC Law 

Workshop"/> </li> 
     <li><img src="images\law3.JPG" width="900" height="675" title="SLC Law 

Workshop"/> </li> 
     <li><img src="images\blood1.JPG" width="900" height="675" title="SLC Blood 

Drive "/> </li> 
     <li><img src="images\blood2.JPG" width="900" height="675" title="SLC Blood 

Drive"/> </li> 
     <li><img src="images\blood3.JPG" width="900" height="675" title="SLC Blood 

Drive"/> </li> 
     <li><img src="images\interview1.JPG" width="900" height="675" title="SLC 

Interview"/> </li> 
     <li><img src="images\interview3.JPG" width="900" height="675" title="SLC 

Interview"/> </li> 
     <li><img src="images\interview4.JPG" width="900" height="675" title="SLC 

Interview"/> </li> 
    </ul> 
    </div> 
    </header> 
    <div id="main"> 
     <h1> 
     Welcome to the Foo Website 
     </h1> 
     <hr /> 
     <p> 
     Welcome to the Foo 
     </p> 
     <p> 
     Lorem Ipsum 
     </p> 
     <p> 
     Hello World 
     </p> 
    </div> 
    </body> 
    </html>

而對於CSS：

body 
{ 
    background-image:url("../images/bg.png"); 
} 
@font-face 
{ 
    font-family: Interstate; 
    src:url("../fonts/Interstate.ttf"); 
} 
#wrapper 
{ 
    position:relative; 
    margin:auto; 
    width:900px; 
    background-color:#fcfcfc; 
} 
#wrapper header img 
{ 
    display:block; 
    margin-left:auto; 
    margin-right:auto; 
} 
#navbar 
{ 
    position:fixed; 
} 
#navbar ul 
{ 
    list-style-type:none; 
    margin:0; 
    padding:0; 
} 
#navbar li 
{ 
    display:inline; 
    float:left; 
} 
#navbar a 
{ 
    display:block; 
    width:225px; 
    font-family:Interstate, Segoe UI, sans-serif; 
    text-align:center; 
} 
#navbar a:hover 
{ 

} 
#main 
{ 
    margin-left:auto; 
    margin-right:auto; 
    padding:0; 
} 
#main h1 
{ 
    font-family:Interstate, Segoe UI; 
    text-align:center; 
    color:#6f273d; 
} 
#main p 
{ 
    font-family:Interstate, Segoe UI, sans-serif; 
    text-align:justify; 
    margin-left:8px; 
    margin-right:8px; 
} 
#main hr 
{ 
    color:#6f273d; 
    background-color:#6f273d; 
} 
header .slider 
{ 
    overflow:hidden; 
} 
header .slider ul 
{ 
    width:8100px; 
    margin:0; 
    padding:0; 
    position:auto; 
    cursor:arrow; 
    animation: slide 15s; 
    animation-duration:15s; 
    animation-iteration-count:infinite; 
    animation-timing-function:ease-out; 
} 
header .slider ul:hover 
{ 
    animation-play-state:paused; 
} 
header .slider ul li 
{ 
    list-style:none; 
    float:left; 
    margin:0; 
    position:relative 
} 
@keyframes "slide" 
{ 
    0% 
    { 
    left:0; 
    } 
    11% 
    { 
    left:-900px; 
    } 
    22% 
    { 
    left:-1800px; 
    } 
    33% 
    { 
    left:-2700px; 
    } 
    44% 
    { 
    left:-3600px; 
    } 
    55% 
    { 
    left:-4500px; 
    } 
    66% 
    { 
    left:-5400px; 
    } 
    77% 
    { 
    left:-6300px; 
    } 
    88% 
    { 
    left:-7200px; 
    } 
    100% 
    { 
    left:0; 
    } 
    }

我穿過W3s CSS和HTML驗證整個CSS和HTML文件跑，但沒有骰子。他們不顯示任何錯誤。有人能幫忙嗎？

來源

2014-02-14 asu74

您需要添加-webkit-animation才能使用chrome和safari。

來源

2014-02-14 12:10:57 Lusse

您需要在瀏覽器特定的前綴：

/*all those who support it*/ 
@keyframes /*....*/ 
animation: slide 15s; 
animation-duration:15s; 
animation-iteration-count:infinite; 
animation-timing-function:ease-out; 

/*Chrome and Safari*/ 
@-webkit-keyframes /*....*/ 
-webkit-animation: slide 15s; 
-webkit-animation-duration:15s; 
-webkit-animation-iteration-count:infinite; 
-webkit-animation-timing-function:ease-out; 

/*Firefox*/ 
@-moz-keyframes /*....*/ 
-moz-animation: slide 15s; 
-moz-animation-duration:15s; 
-moz-animation-iteration-count:infinite; 
-moz-animation-timing-function:ease-out; 

/*Opera*/ 
@-o-keyframes /*....*/ 
-o-animation: slide 15s; 
-o-animation-duration:15s; 
-o-animation-iteration-count:infinite; 
-o-animation-timing-function:ease-out;

您可以像使用指南針（http://compass-style.org/）工具可自動寫入所有這些供應商特定的CSS規則，你只寫：

@include transition();

而且，這將無法在任何地球上的瀏覽器，請參閱caniuse表：http://caniuse.com/#search=animation

來源

2014-02-14 12:11:27

輝煌！因此這些供應商特定的前綴必須應用於每個動畫屬性，例如-o-animation-play-state，-moz-animation-play-state，等等等等？ – asu74

是的，exaclty。大多數css3的東西都需要前綴（到目前爲止，這可能會改變） –

好吧，我爲每個動畫屬性添加了每個供應商的前綴，但是我仍然無法將其設置爲動畫。檢查每個瀏覽器的站點檢查器會一直顯示沒有爲圖像滑塊計算規則。有什麼我錯過了嗎？ – asu74

除了添加瀏覽器前綴，喲你需要刪除動畫名稱周圍的引號。請注意，Firefox的最新版本不再需要-moz-前綴，但您可能希望以任何方式將其添加到長期未更新的那些版本中。

@keyframes "slide" 
{ ...

應該是：

@keyframes slide 
    { ...

您也可以通過使用動畫速記屬性節省一點時間。

animation: slide 15s; 
animation-duration:15s; 
animation-iteration-count:infinite; 
animation-timing-function:ease-out;

可能是：

animation: slide 15s infinite ease-out;

See the MDN documentation for CSS animations for further information.

來源

2014-02-14 12:39:21 apaul

CSS 3動畫無法在任何瀏覽器中使用

回答

相關問題