I have been trying this multiple ways with no success. JavaScript, TweenLite, etc. I need to alternate two <div>
tags, slide1 & slide2 , that live inside slide . Fading one out to fading one in. A continuous loop. I can use a basic css @keyframes
animation like bellow. It works fine, but they are clickable links and one <div>
will always remain on top.
Is there a way to loop the z-index of each div in the @keyframes
anim?
Or maybe a completely better method?
CSS
.slider {
max-width: 300px;
height: 200px;
margin: 20px auto;
position: relative;
}
.slide1,.slide2 {
position: absolute;
width: 100%;
height: 100%;
}
.slide1 {
animation:fade 8s infinite;
-webkit-animation:fade 8s infinite;
}
.slide2 {
animation:fade2 8s infinite;
-webkit-animation:fade2 8s infinite;
}
@keyframes fade
{
0% {opacity:1}
33.333% { opacity: 0}
66.666% { opacity: 0}
100% { opacity: 1}
}
@keyframes fade2
{
0% {opacity:0}
33.333% { opacity: 1}
66.666% { opacity: 0 }
100% { opacity: 0}
}
HTML
<div class="slider">
<div class="slide1"></div>
<div class="slide2"></div>
</div>
They seem to be working for me, check it out: https://codepen.io/giovannipds/pen/LzgYaa
<style>
.slider {
line-height: 1.5;
height: 200px;
margin: 20px auto;
position: relative;
width: 300px;
}
.slide {
padding: 20px;
position: absolute;
width: 100%;
height: 100%;
}
.slide,
.slide a {
color: #fff;
}
.slide1 {
animation: fade 8s infinite;
background: red;
}
.slide2 {
animation: fade2 8s infinite;
background: blue;
}
@keyframes fade
{
0% { opacity: 1 ; z-index: 2; }
33.333% { opacity: 0; z-index: 1; }
66.666% { opacity: 0; z-index: 1; }
100% { opacity: 1; z-index: 2; }
}
@keyframes fade2
{
0% { opacity: 0; z-index: 1; }
33.333% { opacity: 1; z-index: 2; }
66.666% { opacity: 1; z-index: 2; }
100% { opacity: 0; z-index: 1; }
}
</style>
<div class="slider">
<div class="slide slide1">
<ul>
<li><a href="//www.google.com" target="_blank">Google</a></li>
<li><a href="//www.globo.com" target="_blank">Globo.com</a></li>
</ul>
</div>
<div class="slide slide2">
<ul>
<li><a href="//www.lovemondays.com.br" target="_blank">Love Mondays</a></li>
<li><a href="//www.hotmail.com" target="_blank">Hotmail</a></li>
</ul>
</div>
</div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.