Can I animate several CSS transform properties using keyframe animation

Question

I want to animate two (or more) css conversion properties separately, using keyframe animation as follows:

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

HTML:

 <div class="rect"></div> 

translatex animation should start with a delay of 0 seconds and last 5 seconds. The rotatez animation should start with a delay of 1 s and last 3 seconds. Thus, the correct element begins to move, and then after 1 second it starts to rotate, and then after 3 seconds it stops rotating and after 1 second it ends 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 rotatez animation is applied. My question is: are there any ways to implement such an animation using only css (keyframe animation, transitions), or do I need JS and requestAnimationFrame?

EDIT :: my FIDDLE

Answer 1

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

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

Take a look at the google presentation in css animation : google css animation, slide 12

If you give us a fiddle, I can update my answer with your example.

EDIT: here is a workaround, although this is a bit crude version: $: fiddle

 @-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);} } 

Now your animation is linear, but in order to make it easily accessible, I just played with the beginning and end of the animation. Still not perfect, but this is the only way to see how you can get what you want!