Skip to main content

Forums

This topic contains 1 reply, has 2 voices, and was last updated by  Beverleyh 11 months, 1 week ago.

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)

You must be logged in to reply to this topic.

icon-link icon-logo-star icon-search icon-star