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

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;
   }
  }

我通过W3的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;

有关更多信息，请参见MDN文档以获取CSS动画。

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

问题描述

3 个解决方案

解决方案1
0 2014-02-14 12:10:57

解决方案2
0 2014-02-14 12:11:27

解决方案3
0 2014-02-14 12:39:21

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

问题描述

3 个解决方案

解决方案1 0 2014-02-14 12:10:57

解决方案2 0 2014-02-14 12:11:27

解决方案3 0 2014-02-14 12:39:21

解决方案1
0 2014-02-14 12:10:57

解决方案2
0 2014-02-14 12:11:27

解决方案3
0 2014-02-14 12:39:21