css3关键帧动画不起作用答案

【问题标题】：css3 keyframes animation not workingcss3关键帧动画不起作用
【发布时间】：2014-02-09 11:23:23
【问题描述】：

对此进行了相当多的研究，但似乎找不到解决方案。我创建了一个站点，但想添加一个纯 CSS 滑块/幻灯片，我只是在我的书中尝试一些示例。但是，没有动画出现，在 IE 中没有 -webkit 前缀的情况下进行了测试，并且动画在那里也失败了。这是代码；

html

<div class="container">
  <section class="runner">

  </section>
</div>

CSS

   .container {
    width: 960px;
    height: 300px;
    -webkit-perspective: 1100px
}

 .runner {
    width: 100%;
    height: 100%;
    background: url(img/teams2.jpg);
    -webkit-animation: slideshow 20s infinite 2s    
}

@-webkit-keyframes slideshow {
    20% {background: url(img/teams2.jpg);}
    20%, 45% {background: url (img/logo.png);}
    50%, 70% {background: url (img/header.png);}
    75%, 95% {background: url (img/get_involved.png)}
}

【问题讨论】：

真的吗？我上面列出的示例实际上是我书中示例的精确副本。你建议怎么做？谢谢
你忘记了 ;在 -webkit-perspective 之后

标签： html css

【解决方案1】：

你的背景定义有一点错误：

background: url (img/header.png);

应该是

background: url(img/header.png);

注意url 和( 之间的隐蔽空格。

固定演示：http://jsfiddle.net/c6t6S/

【讨论】：