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

您可以通过设置动画时间值来控制速度。

 -webkit-animation: moveSlideshow6 3s linear infinite;
-moz-animation: moveSlideshow1 3s linear infinite;

Answer 2

你好这是你的小提琴答案

使用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 ]
}

我刚刚编辑了小提琴，所以我已经单独添加动画参数你可以使用速记：）

小提琴http://jsfiddle.net/krunalp1993/36XeK/4/

希望它可以帮助你：）

div隐藏并显示循环

2 个答案: