Skip to main content


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
  • #269822



    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:



    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.


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