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?
Yes, it is possible. Instead of calling two animation-names, create only one animation with both actions inside:
Look at Google’s "Animate your HTML5" presentation.
Here is a workaround, even though it is a bit of a coarse version:
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.