CSS3 滑块在我的网站上不起作用

Question

我正在尝试在我的网站上实现这个响应式 CSS 滑块：

http://codepen.io/dudleystorey/pen/ehKpi

我把所有的代码都和我在这个例子中看到的一模一样。

我的代码是 HTML 中的（来自主要部分）：

      <section class="main-section">
      <div id="slider">
<figure>
Here are the 5 pictures but I cant put them becaouse I have less than 10 points of reputation. However, are the same links of codepen.
</figure>
</div>
  </section>

在 CSS 中是这样的：

@keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}

body { margin: 0; } 
div#slider { overflow: hidden; }
div#slider figure img { width: 20%; float: left; }
div#slider figure { 
  position: relative;
  width: 500%;
  margin: 0;
  left: 0;
  text-align: left;
  font-size: 0;
  animation: 30s slidy infinite; 
}

如您所见，我完全输入了代码，甚至是相同的图片，但它不起作用。如果我制作一个新的 html 和 css，只需在正文中使用 div 滑块，它就可以工作。

主要部分在导航标签旁边，在页脚之前。

谢谢。

Answer 1

Codepen 默认使用 prefixfree.min.js，可见代码框中未提及。 CSS 中使用的动画需要前缀才能在您的浏览器中运行。您有 2 个选择：

下载 prefixfree.min.js 并将其添加到您的 html，它会自动为您使用的浏览器设置 CSS3 个前缀。
为每个浏览器添加前缀：

body {
    margin: 0;
}
div#slider {
    overflow: hidden;
}
div#slider figure img {
    width: 20%;
    float: left;
}
div#slider figure {
    position: relative;
    width: 500%;
    margin: 0;
    left: 0;
    text-align: left;
    font-size: 0;
  
    -webkit-animation: 30s slidy infinite;
    -moz-animation: 30s slidy infinite;
    -o-animation: 30s slidy infinite;
    animation: 30s slidy infinite;
}
@-webkit-keyframes slidy {
    0% {left: 0%;}
    20% {left: 0%;}
    25% {left: -100%;}
    45% {left: -100%;}
    50% {left: -200%;}
    70% {left: -200%;}
    75% {left: -300%;}
    95% {left: -300%;}
    100% {left: -400%;}
}
@-moz-keyframes slidy {
    0% {left: 0%;}
    20% {left: 0%;}
    25% {left: -100%;}
    45% {left: -100%;}
    50% {left: -200%;}
    70% {left: -200%;}
    75% {left: -300%;}
    95% {left: -300%;}
    100% {left: -400%;}
}
@-o-keyframes slidy {
    0% {left: 0%;}
    20% {left: 0%;}
    25% {left: -100%;}
    45% {left: -100%;}
    50% {left: -200%;}
    70% {left: -200%;}
    75% {left: -300%;}
    95% {left: -300%;}
    100% {left: -400%;}
}
@keyframes slidy {
    0% {left: 0%;}
    20% {left: 0%;}
    25% {left: -100%;}
    45% {left: -100%;}
    50% {left: -200%;}
    70% {left: -200%;}
    75% {left: -300%;}
    95% {left: -300%;}
    100% {left: -400%;}
}

<div id="slider">
    <figure>
        <img src="http://demosthenes.info/assets/images/austin-fireworks.jpg" alt="">
        <img src="http://demosthenes.info/assets/images/taj-mahal.jpg" alt="">
        <img src="http://demosthenes.info/assets/images/ibiza.jpg" alt="">
        <img src="http://demosthenes.info/assets/images/ankor-wat.jpg" alt="">
        <img src="http://demosthenes.info/assets/images/austin-fireworks.jpg" alt="">
    </figure>
</div>

CSS3 滑块在我的网站上不起作用

CSS3 Slider does not work on my web

html

css

slider