Forums

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

Home Forums JavaScript FadeIn and delayed fadeOut problem

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

    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

    #269824
    Beverleyh
    Participant

    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)
  • The forum ‘JavaScript’ is closed to new topics and replies.