Can I 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:         


        

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

Have a look to a google presentation on css animation : google css animation, slide 12

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

EDIT: here is a workaround, even though it is a bit of a coarse 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 to make it like ease-in-out, I just played with the beginning and ending of the animation. Still not perfect, but this is the only way I see how you could get what you want !