Question

这是一个学校项目的简单网站。我在主页上的图像滑块的CSS动画上遇到了麻烦。它拒绝动画，并且检查浏览器网站检查员显示该规则没有被“计算”（应用？）到图像。

以下是该页面的代码：

<!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文件，但没有骰子。他们没有显示任何错误。任何人都可以帮忙吗？

Answer 1

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

Answer 2

您需要特定于浏览器的前缀：

/*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

Answer 3

除了添加浏览器前缀之外，还需要删除动画名称周围的引号。请注意，最新版本的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.

CSS 3动画无法在任何浏览器中运行

3 个答案: