Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Need help understanding CSS fading slider animation

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #286728
    Korin
    Participant

    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;
    }
    }

    #286729
    Paulie_D
    Member

    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

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.