Making a CSS fade out for a slideshow?

HTML-CSS
1

How can I get a fade out? I have a fade in but cannot figure out fading out.

Here is the code: https://codepen.io/GiacomoLaw/pen/YdbRwP

Thanks!

2

I can’t do css fade outs, but I can do them REALLY WELL in JQuery.
you can try the effect at this program I made.
https://www.khanacademy.org/computer-programming/cool-effects/6351960483201024

3

Thanks, I’ll take a look!

4

I think you can, using the opacity within a transition. If you want one fade out need other transition the opacity 1 to 0.x

5

Can you give me a demo? Spent a long time on this and could not figure it out :confused:

6

Try changing the animation to this.

@keyframes fade {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
1 Like
7

Thanks I’ll give it a go once I’m back on my pc!

8

I also recommend you to look up for the .fadeIn() function of JQuery, since you can set it to wait until the page is ready to start the animation, avoiding the transiction to behave weirdly :smiley:

you can find videos on yt with simple ways to apply it!

9

I found this gem somewhere: https://codepen.io/davidhc/pen/nLpJk