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.

Are you just targeting chrome browser only/? why not following the standard — Kheema Pandey, Apr 06 '15 at 10:29
@KheemaPandey just tried it on firefox, and everything works as expected. Now I'm wondering if this is a chrome bug. — Pretty Good Pancake, Apr 06 '15 at 10:42
I am talking about why using browser specific Prefix.. standard is `@keyframes` — Kheema Pandey, Apr 06 '15 at 10:45
@BoltClock updated my answer and fiddle with prefix free keyframes. — Pretty Good Pancake, Apr 06 '15 at 10:49
why cant you use zoom in and zoom out in one keyframe? http://jsfiddle.net/3p3x7v1f/3/ — Vitorino fernandes, Apr 06 '15 at 10:57
Because this particular example is not the issue. I've made a simple fiddle to showcase the problem, I'm looking for a general solution, not a solution for this exact case :) — Pretty Good Pancake, Apr 06 '15 at 11:36
@PrettyGoodPancake In Chrome it goes first from 0 to 1 and after 1 to .5. Isn't this the desired behavior? http://jsfiddle.net/08fquxLj/ — Mircea, Apr 06 '15 at 12:17
@Mircea Yes, it goes from 0 to 1 with a transition, but then goes from 1 to .5 abrubtly (no transition). You can compare the behavior between firefox and chrome (or even safari and chrome). I'm starting to assume this is a chrome bug. — Pretty Good Pancake, Apr 06 '15 at 12:55

score 6 · Accepted Answer · edited May 23 '17 at 12:06

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.

"Weirdly, ..." *Au contraire*, this is perfectly normal for Chrome. — BoltClock, Apr 06 '15 at 16:36

score -2 · Answer 2 · answered Apr 06 '15 at 10:57

-2

See this http://jsfiddle.net/khanamiryan/3p3x7v1f/2/

@-webkit-keyframes inout {
    0% {
        -webkit-transform: scale(0)
    }
    50% {
        -webkit-transform: scale(1)
    }
    100% {
        -webkit-transform: scale(.5)
    }
}

answered Apr 06 '15 at 10:57

Ashot Khanamiryan

1,102
12
19

Thanks for your input but as I said, this is not the answer I'm expecting. The real case is far more complex, and my issue is really this behavior and not this exact example :) – Pretty Good Pancake Apr 06 '15 at 11:33

Chained transform animation doesn't animate

2 Answers2