目前我正在使用swipper旋转木马在我创建的网站中。我想为每个滑动图片的标题添加一些动画。所以即时通讯使用@ -webkit-keyframes。但只有第一个图像即时得到这个effect.In其他图片的内容是static.Any知道该如何实现这个它loads.Appreciate任何help.Thanks后的每张幻灯片......需要动态添加类名称
.carousel-content{
width: 1200px;
height: 100px;
//padding: 20px;
padding-top:200px;
padding-left:80px;
padding-right: 80px;
position: absolute;
text-align: center;
color:white;
font-size:40px;
font-weight: 800;
-webkit-animation-duration: 10s;
animation-duration: 2s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes fadeInDown {
0% {
opacity: 0;
-webkit-transform: translateY(-20px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
}
}
@keyframes fadeInDown {
0% {
opacity: 0;
transform: translateY(-20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.fadeInDown {
-webkit-animation-name: fadeInDown ;
animation-name: fadeInDown ;
}
HTML
<div class="swiper-container" >
<div class="swiper-wrapper" >
<div class="swiper-slide">
<div class="carousel-content fadeInDown ">
Buisness is good
</div>
</div>
<div class="swiper-slide">
<div class="carousel-content fadeInDown ">
Buisness is good
</div></div>
<div class="swiper-slide">
<div class="carousel-content fadeInDown">
Buisness is good
</div></div>
<div class="swiper-slide">
<div class="carousel-content fadeInDown">
Buisness is good
</div></div>
<div class="swiper-slide" >
<div class="carousel-content fadeInDown">
Buisness is good
</div></div>
<div class="swiper-slide">
<div class="carousel-content fadeInDown">
Buisness is good
</div></div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
我的jsfiddle是https://jsfiddle.net/2ume828d/
你能提供你的代码作为片断所有的 –
首先删除多余的'“'从你的HTML。这是什么'类=”旋转木马的内容”,‘fadeInDown’'? –
OK给我一分钟..谢谢 –