Is it possible to alternate z-index on CSS animation - css

Question

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>

Answer 1

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>Google</li>
<li>Globo.com</li>
</ul>
</div>
<div class="slide slide2">
<ul>
<li>Love Mondays</li>
<li>Hotmail</li>
</ul>
</div>
</div>