Question

已经研究了这一点，但似乎无法找到解决方案。我创建了一个网站，但想添加一个纯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)}
}

Answer 1

您的背景定义中有一点错误：

background: url (img/header.png);

应该是

background: url(img/header.png);

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

css3关键帧动画不起作用

1 个答案:

修正了演示：http://jsfiddle.net/c6t6S/