Crossfading images with CSS Keyframes not working

Question

I'm using keyframes in CSS for the first time.

It didn't work on the 2 browsers I tested (Safari and Chrome) and I learned that all keyframe-related properties need browser prefixes, so I added -webkit- but it still won't work

The purpose is to have the images crossfade every 10 seconds, but I only see Image2 constantly.

Here's the code for the div:

<div id="cf">
<img class="bottom" src="Image1.jpg" width = "300px">
<img class="top" src="Image2.jpg" width = "300px" />
</div>

CSS:

#cf {
position:relative;
width:300px;
margin:0 auto;
}

#cf img {
position:absolute;
left:0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}


@keyframes cf3FadeInOut {

0% {
opacity:1;
}

45% {
opacity:1;
}

55% {
opacity:0;
}

100% {
opacity:0;
}
}

@-webkit-keyframes cf3FadeInOut {

0% {
    -webkit-opacity:1;
}

45% {
    -webkit-opacity:1;
}

55% {
    -webkit-opacity:0;
}

100% {
    -webkit-opacity:0;
}

}

#cf3 img.top {
animation-name: cf3FadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 10s;
animation-direction: alternate;

-webkit-animation-name: cf3FadeInOut;
-webkit-animation-timing-function: ease-in-out;
-webkit-iteration-count: infinite;
-webkit-duration: 10s;
-webkit-animation-direction: alternate;
}

Alvaro Menéndez · Accepted Answer · 2015-10-13 10:24:51Z

1

You have made a mistake calling the animation. the id #cf3 doesn't exist. The rest works fine (but delete the -webkit- for opacity, that css property doesn't need it)

#cf img.top {
animation-name: cf3FadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 10s;
animation-direction: alternate;

-webkit-animation-name: cf3FadeInOut;
-webkit-animation-timing-function: ease-in-out;
-webkit-iteration-count: infinite;
-webkit-duration: 10s;
-webkit-animation-direction: alternate;
}

FIDDLE

answered Oct 13, 2015 at 10:24

Alvaro Menéndez

9,0523 gold badges41 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Crossfading images with CSS Keyframes not working

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related