javascript - div 循环隐藏和显示

Question

如何创建一个道路分隔线动画，一个接一个地动画？请找到以下链接以获取问题示例 http://jsfiddle.net/shantnuraj/36XeK/1/

HTML:

<div id="tech-slideshow">
    <div id="tech-slideshow-1" class="tech-slideshow-1">dfsd</div>
    <div id="tech-slideshow-2" class="tech-slideshow-1">dfs</div>
    <div id="tech-slideshow-3" class="tech-slideshow-1">dfsd</div>
    <div id="tech-slideshow-4" class="tech-slideshow-1">dfs</div>
    <div id="tech-slideshow-5" class="tech-slideshow-1">fsd</div>
    <div id="tech-slideshow-6" class="tech-slideshow-1">dfs</div>
</div>

CSS:

.devider-marque img.devider {
    margin-top: 0px;
}
#tech-slideshow {
    height: 500px;
    position: absolute;
    overflow: hidden;
    left: 50%;
    width: 50px;
    bottom: 0;
}
#tech-slideshow > div {
    width: 50px;
    background:#000;
    position: absolute;
    top: 0;
    left: 0;
    height: 50px;
}
#tech-slideshow-1 {
    margin-top: -200px;
    -webkit-animation: moveSlideshow1 5s linear infinite;
    -moz-animation: moveSlideshow1 5s linear infinite;
}
#tech-slideshow-2 {
    margin-top: -400px;
    -webkit-animation: moveSlideshow2 5s linear infinite;
    -moz-animation: moveSlideshow1 5s linear infinite;
}
#tech-slideshow-3 {
    margin-top: -600px;
    -webkit-animation: moveSlideshow3 5s linear infinite;
    -moz-animation: moveSlideshow1 5s linear infinite;
}
#tech-slideshow-4 {
    margin-top: -800px;
    -webkit-animation: moveSlideshow4 5s linear infinite;
    -moz-animation: moveSlideshow1 5s linear infinite;
}
#tech-slideshow-5 {
    margin-top: -1000px;
    -webkit-animation: moveSlideshow5 5s linear infinite;
    -moz-animation: moveSlideshow1 5s linear infinite;
}
#tech-slideshow-6 {
    margin-top: -1200px;
    -webkit-animation: moveSlideshow6 5s linear infinite;
    -moz-animation: moveSlideshow1 5s linear infinite;
}
 @-moz-keyframes moveSlideshow1 {
 0% {top:0; height:150px;}
 10% {top:20;height:150px;}
 100% {top:1200px;height:150px;}
}
@-webkit-keyframes moveSlideshow1 {
 0% {top:0; height:150px;}
 10% {top:20;height:150px;}
 100% {top:1200px;height:150px;}
}

Answer 1

你好这是你用 fiddle 的答案

使用transition-delay代替margin-top

#Anydiv {
     animation-name: moveSlideshow1;
     animation-duration: 5s;
     animation-iteration-count: infinite;
     animation-timing-function: linear;
     animation-delay: 1s; [ adding transition delay +1 to next div in loop will make it smoother ]
}

我刚刚匆忙编辑了 fiddle ，所以我单独添加了动画参数你可以使用速记:)

fiddle http://jsfiddle.net/krunalp1993/36XeK/4/

希望对你有帮助:)