我正在尝试使用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
