Ontje Ontje - 6 months ago 24
HTML Question

CSS3 initial crossfade animation fades to white

I wanted to set up a cross fading background with CSS3 and followed some instructions from http://css3.bradshawenterprises.com/cfimg/

My animation looks like:

@keyframes imageAnimation {
0% { opacity: 1; }
22% { opacity: 1; }
33% { opacity: 0; }
89% { opacity: 0; }
100% { opacity: 1; }
}


The crossfade works, but the problem is, that the first animation loop isn't working as expected. I set up a little jsfiddle example to reproduce my problem:
https://jsfiddle.net/5j7nrf7y/

As you can see, the first loop from red fades to white and then jumps to yellow. After the first complete loop, the crossfade works fine from red to yellow.

What is wrong with the first animation-loop?

Answer

Try setting your starting opacity to 1:

https://jsfiddle.net/5j7nrf7y/1/

.container > figure { 
    ....
    opacity:1;
    ....
}

I believe since they initially start at 0, you see that jump because they are hidden before the next animation begins

Comments