CSS animation, fade in fade out opacity on automated slideshow

Question

I want to make a slideshow where the pictures transition through fade in fade out opacity. it just glooms on the screen and switches to the next picture.

I got it to work but added the other brower webkits and it stopped working. Can't seem to find my mistake.. The slideshow still works.

This is the code:

/* Fading animation in css */
.fade {
-webkit-animation-name: fade 5s;
animation-name: fade 5s;
-moz-animation: fade 5s;
-o-animation: fade 5s;
}

@-webkit-keyframes fade {
0% {opacity: 0.2} 
50% {opacity: 1}
100% {opacity:0.2}
}

@-moz-keyframes fade{
    0% {opacity: 0.2} 
  50% {opacity: 1}
  100% {opacity:0}  
}

@keyframes fade {
  0% {opacity: 0.2} 
  50% {opacity: 1}
  100%{opacity: 0.2}
    }
@-o-keyframes fade {
0% {opacity: 0.2} 
  50% {opacity: 1}
  100%{opacity: 0.2}

}

<div class="slideshowcontainer">
        <div class="slideshow fade">
            <img src="images/PSA.PNG">
        </div>
        <div class="slideshow fade">
            <img src="images/OWSA.PNG">
        </div>
        <div class="slideshow fade">
            <img src="images/CEAC.PNG">
        </div>

not sure if it solves your problem, but in the code you posted above, you are missing a closing div tag, at the end. — scott.schaffer, Jan 09 '18 at 20:14
Ah forgot to copy that one, mb, the answer is the first one below, helped me out — Gilles Coene, Jan 09 '18 at 21:06

Nandu Kalidindi · Accepted Answer · 2018-01-09T20:23:34.013

Just modify the .fade class to this

.fade {
  -webkit-animation: fade 5s;
  animation: fade 5s;
  -moz-animation: fade 5s;
  -o-animation: fade 5s;
}

Because animation-name does not expect a timeinterval, it only expects the name.

.fade {
-webkit-animation: fade 5s;
animation: fade 5s;
-moz-animation: fade 5s;
-o-animation: fade 5s;
}

@-webkit-keyframes fade {
0% {opacity: 0.2} 
50% {opacity: 1}
100% {opacity:0.2}
}

@-moz-keyframes fade{
    0% {opacity: 0.2} 
  50% {opacity: 1}
  100% {opacity:0}  
}

@keyframes fade {
  0% {opacity: 0.2} 
  50% {opacity: 1}
  100%{opacity: 0.2}
    }
@-o-keyframes fade {
0% {opacity: 0.2} 
  50% {opacity: 1}
  100%{opacity: 0.2}

}

<div class="slideshowcontainer">
        <div class="slideshow fade">
            <img src="https://images-na.ssl-images-amazon.com/images/I/71%2BmEwFaoaL._SL1500_.jpg" width="200px" height: "200px">
        </div>
        </div>

Kindly help on this one pls? https://stackoverflow.com/questions/61203327/css-animation-fadein-fadeout-2-images-continuously — newdeveloper, Apr 14 '20 at 08:13
Thanks for this. I was looking a solution for a one shot transition for use with blazor. — Mark Vance, Nov 22 '21 at 09:35

score 4 · Answer 2 · answered Jan 09 '18 at 20:15

you just need to change the property name

from

.fade {
-webkit-animation-name: fade 5s;
animation-name: fade 5s;
-moz-animation: fade 5s;
-o-animation: fade 5s;
}

to

.fade {
-webkit-animation: fade 5s;
animation: fade 5s;
-moz-animation: fade 5s;
-o-animation: fade 5s;
}

score 0 · Answer 3 · answered Jan 09 '18 at 20:17

0

animation-name wont take seconds, only the name. change animation-name to just animation.

answered Jan 09 '18 at 20:17

scott.schaffer

645
7
22

CSS animation, fade in fade out opacity on automated slideshow

3 Answers3

Linked