Need help understanding CSS fading slider animation

[Korin]

Hi all, I’m fairly new to the CSS keyframes and animation. I thought it would be really cool to learn how to make a picture cross fade animation. I found some tutorial online (“Demo with multiple images” – http://css3.bradshawenterprises.com/cfimg/#cfimg3). It work, but I’m not really sure what’s going on under the hood. I know the key elements to creating this is the animation-duration and dividing the animation-delay for the number of images you have. What I don’t understand is the chosen codes or algorithm for the keyframes. I’ve seen similar tutorials and all of them have this same code used:

@keyframe fader {
0% {
Visibility: hidden;
Opacity: 0;
}
2% {
Visibility: visible;
Opacity: 1;
}
18% {
Visibility: visible;
Opacity: 1;
}
20%, 100% {
Visibility: hidden;
Opacity: 0;
}
}

or

@keyframes fadeInOut {
0% {
opacity:1;
}
17% {
opacity:1;
}
25% {
opacity:0;
}
92% {
opacity:0;
}
100% {
opacity:1;
}
}

Why couldn’t the process go like this:
@keyframes fader {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}

[Paulie_D]

With only two keyframes the animation is constanly running between full opacity and being transparent.

By adding mid-steps we can essentially pause the animation effect at a fixed value for a set period even though the actual animation is still running

[Author]

Posts