I've been working on improving my understanding of animations, but keyframes are still a bit confusing for me. To help with my learning process, I decided to create a simple box slider that fades in each layer and then repeats the process. My goal is to smoothly transition from one layer to another and keep the animation going.
Here is what I have so far:
HTML
<div class="index"></div>
<div class="index"></div>
<div class="index"></div>
<div class="index"></div>
<div class="index"></div>
CSS
div {
width: 200px;
height: 200px;
position: absolute;
top: 0;
left: 0;
z-index: 1;
opacity: 0;
}
div:first-of-type {
background: red;
animation-delay: 0s;
opacity: 1 !important;
}
div:nth-of-type(2) {
background: green;
animation-delay: 5s;
}
div:nth-of-type(3) {
background: blue;
animation-delay: 10s;
}
div:nth-of-type(4) {
background: yellow;
animation-delay: 15s;
}
div:last-of-type {
background: orange;
animation-delay: 20s;
}
.index {
animation: index 5s ease-in infinite;
}
@keyframes index {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
I am wondering how I can achieve the effect I desire?
Fiddle: http://jsfiddle.net/s2rxujkt/1/