CSS 滑块：div

Question

我正在尝试使用 div 制作滑块，但所有 div 都与动画粘在一起。我的意思是，它应该一一出现。

我有这个：

<div class="mh-footer-menu" id="menu-second_nav">
   <div class="slider">
      <img src="http://localhost/wordpress/wp-content/uploads/2015/07/4da7ae8be51cdc062177ceaa1b8eba71-150x150.jpg" class="attachment-thumbnail size-thumbnail wp-post-image" alt="quienes-somos" width="150" height="150">
      <a href="http://localhost/wordpress/?page_id=371">Quienes somos</a> 
   </div>
   <div class="slider">
       <img src="http://localhost/wordpress/wp-content/uploads/2016/03/MapaInternet-2015-150x150.png" class="attachment-thumbnail size-thumbnail wp-post-image" alt="MapaInternet-2015" width="150" height="150">
       <a href="http://localhost/wordpress/?page_id=369">Integrantes</a>
  </div>

还有这个：

@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#menu-second_nav {
    background-color: #e64946; 
    height: 80%; 
    width: auto;
    padding: 2%;
}

div#menu-second_nav { overflow: hidden; }
div#menu-second_nav div.slider { width: 20%; float: left; }
div#menu-second_nav div.slider { 
  position: relative;
  width: 100%;
  /*margin: 0;
  left: 0;
  text-align: left;
  font-size: 0;*/
  animation: 30s slidy infinite; 
}

div#menu-second_nav div.slider a {
   color: #000000;
   margin-left: 2%;
}

div#menu-second_nav div.slider a:hover { 
    color: #ffffff; 
}

div#menu-second_nav div.slider img {
    vertical-align: text-top;
}

我该怎么办，所以 2 div 一个接一个出现。现在它是这样显示的： print Screen

Answer 1

为什么不使用像 nivo slider 这样的东西。它易于使用和自定义。

https://github.com/gilbitron/Nivo-Slider

CSS 滑块：div

CSS Slider: with div

html

css

slider