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滑块。它易于使用和定制。

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