Chained transform animation doesn't animate

Question

While working with animations, I came across an undocumented and unexpected behavior:

When chaining animations using transform (any transform property, and only the transform property), the first animation will have the expected behavior of transitioning from state A to state B, while the second will just go from B to C without any transition.

  div {
    background:red;
    width:100px;
    height:100px;
    -webkit-animation: in 2s, out 2s 3s forwards;
    animation: in 2s, out 3s 2s forwards;
}
@keyframes in {
    from {
        transform: scale(0);
    }
    to {
        transform: scale(1);
    }
}
@keyframes out {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(.5);
    }
}
@-webkit-keyframes in {
    from {
        -webkit-transform: scale(0);
    }
    to {
        -webkit-transform: scale(1);
    }
}
@-webkit-keyframes out {
    from {
        -webkit-transform: scale(1);
        
    }
    to {
        -webkit-transform: scale(.5);
    }
}

<div></div>

I know in this particular case, things can be done in a single step, but that's not the solution I'm looking for

How can I solve this using CSS only?

UPDATE : Everything seems to work just fine in firefox, could it be a chrome bug?

UPDATE 2 : Added the prefix free animation as requested; Doesn't change much.

Answer 1

This is another Chrome rendering bug.

Weirdly, a workaround seems to be to add some other property that doesn't matter to make it recognize that an animation seems to happen. In this case, I added a line that set the background to what it was by default on the in's to. This only needs to be done for the -webkit- keyframe animation.

The actual fix in your project may or may not require changing the property to something else/adding it more places. I can't know without testing myself.

 div {
    background:red;
    width:100px;
    height:100px;
    -webkit-animation: in 2s, out 2s 3s forwards;
    animation: in 2s, out 3s 2s forwards;
}
@keyframes in {
    from {
        transform: scale(0);
    }
    to {
        transform: scale(1);
    }
}
@keyframes out {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(.5);
    }
}
@-webkit-keyframes in {
    from {
        -webkit-transform: scale(0);
    }
    to {
        -webkit-transform: scale(1);
        background:red;
    }
}
@-webkit-keyframes out {
    from {
        -webkit-transform: scale(1);
        
    }
    to {
        -webkit-transform: scale(.5);
    }
}

<div></div>

Side notes:

• Use semicolons - by not doing so you make everyone involved's lives harder for no reason.
• Use good formatting - same reason as above
• You don't need to use -moz- for animation or transform (there is no -moz-transform)
• Put the unprefixed version of properties after the prefixed ones - you want them to use the more standard version whenever possible - since CSS is cascading that means place it afterwards, it will fall back to things above.