Forums

Give help. Get help.

  • # April 14, 2018 at 6:42 am

    Hello,

    I made a pretty basic slider that shows some records of a database. I used fadeinout to make a fading effect. But somehow I can’t fix a delayed fadeOut. Now the div fades in and immediately fades out without a delayed fadeOut. So how can i make sure that the div fades in and after a couple of seconds the same div fades out?

    All of the used codes: https://codepen.io/anon/pen/eMwBqq

    # April 14, 2018 at 7:38 am

    If you increase the overall animation length from 1s to, for arguments sake, 5s, and then change your keyframes to;

    @keyframes fadeinout {
    0, 10%, 90%, 100% { opacity:0; }
    11%, 89% { opacity:1; }
    }
    

    You’ll create a window of time between (11% and 89%) where the element is fully visible.

    The example above equates to a half second fade at the beginning and end of the animation, with 4 seconds of visibility in the middle.

    Example http://jsbin.com/wimupubuno/edit?html,css,output

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag