css3 sync multiple element animation


I have 2 element, one on top of the other and they both animate. Despite using the same keyframe rule and animation properties, the elements are out of sync on the first loop but are in sync after the first loop. WHY?!

The markup:

<div class="small xfade">

<div class="big xfade">

The css:

@keyframes xfade {
    0%   { opacity:1; }
    17%  { opacity:1; }
    25%  { opacity:0; }
    92%  { opacity:0; }
    100% { opacity:1; }

.xfade span {
    animation-name: xfade;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-duration: 8s;


EDIT In my real-world implementation, the "small" elements are translucent, so the ones underneath are visible at the start of the animation. I thought setting opacity: 0; on all of small's children would solve this (since the keyframe rule brings it back to 1 as soon as the animation kicks in); alas no. This issue also mysteriously solves itself after the first loop.

Any tips for that would also be appreciated.

Problem courtesy of: jacob


As vals mentioned, one of the color code you have given is wrong, so first and second color is same. So it feels like the animation is not working as it is same color. (But actually its working)

So, I changed the color code and working fine.

.xfade.big span:nth-of-type(4) {
    background: #0300FF;

Working Demo

Solution courtesy of: Surjith S M


There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.