How to animate multiple CSS transform properties separately using keyframe animation

animation, css, css-animations, transform

Solution

Yes, it is possible. Instead of calling two animation-names, create only one animation with both actions inside:

@keyframes translateXandZ {
    100% {
        transform: translateX(100px) rotateZ(80deg);
    }
}

Look at Google's "Animate your HTML5" presentation.

Here is a workaround, even though it is a bit of a coarse version:

@-webkit-keyframes translateXandZ {
    0% {-webkit-transform: translateX(0px) rotateZ(0deg);}
    2% {-webkit-transform: translateX(1px) rotateZ(0deg);}
    5% {-webkit-transform: translateX(3px) rotateZ(0deg);}
    20% {-webkit-transform: translateX(20px) rotateZ(0deg);}
    80% {-webkit-transform: translateX(80px) rotateZ(80deg);}
    95% {-webkit-transform: translateX(97px) rotateZ(80deg);}
    98% {-webkit-transform: translateX(99px) rotateZ(80deg);}
    100% {-webkit-transform: translateX(100px) rotateZ(80deg);}
}

Your animation is linear, but to make it ease-in-out, I played with the beginning and ending of the animation. It's still not perfect, but this is the only way I see how you could get what you want.

Problem

I want to animate two (or more) CSS transform properties separately using keyframe animation like this: ``` @keyframes translatex { 100% { transform: translateX(100px); } } @keyframes rotatez { 100% { transform: rotateZ(80deg); } } ``` HTML: ``` <div class="rect"></div> ``` The `translatex` animation should start with a 0s delay and last for 5 seconds. The `rotatez` animation should start with a 1s delay and last for 3 seconds. The `.rect` element starts moving, then after 1 second it starts rotating, then after 3 seconds it stops rotating and after 1 more second it finishes its movement. Apply animation: ``` .rect { animation-name: translatex, rotatez; animation-duration: 5s, 3s; animation-timing-function: ease, ease-in-out; animation-delay: 0s, 1s; animation-direction: forward, forward; } ``` The problem is that only the `rotatez` animation is applied. Are there ways to implement the animation using only CSS, such as keyframe animation or transitions, or do I need JavaScript and `requestAnimationFrame`?

Original source