How to animate multiple CSS transform properties separately using keyframe animation

Question

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?

That's bad. Complex animations with js timers are not so smooth on iOS devices. Fiddle coming soon. — Dmitry
– Dmitry, Commented Nov 27, 2012 at 8:11
Did you try to put a <div> around that <div> and animate each <div> independently? I think that's the cleanest way to make such work. — Alexis Wilke
– Alexis Wilke, Commented Dec 4, 2017 at 1:07

the Tin Man · Accepted Answer · 2022-02-24 23:47:38Z

25

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.

edited Feb 24, 2022 at 23:47

the Tin Man

161k44 gold badges222 silver badges308 bronze badges

answered Nov 27, 2012 at 8:30

leMoisela

1,0769 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Dmitry Over a year ago

Thanks for helpful link. The problem is that in your case both properties animate together and I can use only one timing function and delay for them. What I need is separate transform properties animation.

Rory O'Kane Over a year ago

You don’t necessarily have to simulate ease-in-out manually with percentages. The CSS Animations spec says you can specify the interpolation function to use when moving to the next keyframe with the animation-timing-function property of each keyframe. This can replace manual interpolation as long as you’re not moving two things at the same time with different animation lengths.

Shanon Jackson Over a year ago

this fiddle is gone :< does anyone still have a link?

leMoisela Over a year ago

:O Sorry it disappeared! I guess they throw away code after some time. I don't have the solution at hand anymore

Collectives™ on Stack Overflow

How to animate multiple CSS transform properties separately using keyframe animation

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related