Can we perform multiple transformations on an element through different animations?

Question

In CSS to apply multiple transformations to the same element in one rule it must be written like this: .selector{ transform:translateY( *value* ) scale( *value*) rotateZ(*value*) etc. But how do I add multiple transformations in multiple animations? Example:

@import 'https://necolas.github.io/normalize.css/latest/normalize.css';
/* //////////////////////////////// INITIAL //////////////////////////////// */
html, body{ height:100% } body{ background:#eee }
#btnCont{
  display:block; width:100px; height:100px; margin:0 auto; position:relative;
  transform:translateY(-50%); top:50%; perspective:1000px
}
#btn {
  width:100%; height:100%; background:#333; color:#eee; border:0; outline:0;
  text-transform:uppercase; transform:rotateX(93deg) translateX(0);
  transform-origin:bottom
}
/* //////////////////////////////// __ANIM_ //////////////////////////////// */
.rotUp{ 
  animation-name:rotateUp; animation-duration:1s; animation-fill-mode:forwards 
}
.movUp{
  animation-name:moveUp; animation-duration:1.5s; animation-fill-mode:forwards
}
@keyframes rotateUp{ 
  0%{ transform:rotateX(93deg) }
  100%{ transform:rotateX(0deg)  }
}
@keyframes moveUp{ 
  0%{ transform:translateX(0) }
  100%{ transform:translateX(95px)  }
}

<div id="btnCont"> <button id="btn" class="rotUp movUp">button</button> </div>

I want to perform rotateUp and moveUp simultaneously. As it is now, rotateUp gets completely ignored.

Possible duplicate of [Can I animate multiple css transform properties separately using keyframe animation](http://stackoverflow.com/questions/13579730/can-i-animate-multiple-css-transform-properties-separately-using-keyframe-animat) — Zach Saucier, Jul 16 '16 at 03:57

score 1 · Accepted Answer · answered Jul 15 '16 at 21:16

transform can take more than one rule/value at once. you can mix those values and add as many steps as you wish.

Basicly:

@import 'https://necolas.github.io/normalize.css/latest/normalize.css';
/* //////////////////////////////// INITIAL //////////////////////////////// */
html, body{ height:100% } body{ background:#eee }
#btnCont{
  display:block; width:100px; height:100px; margin:0 auto; position:relative;
  transform:translateY(-50%); top:50%; perspective:1000px
}
#btn {
  width:100%; height:100%; background:#333; color:#eee; border:0; outline:0;
  text-transform:uppercase; transform:rotateX(93deg) translateX(0);
  transform-origin:bottom
}
/* //////////////////////////////// __ANIM_ //////////////////////////////// */
.rotUp.movUp{
  animation-name:anim; animation-duration:1.5s; animation-fill-mode:forwards
}
@keyframes anim{ 
  0%{ transform:rotateX(93deg) translateX(0) }
  75%{ transform:rotateX(25deg)  translateX(90px) }
  100%{ transform:rotateX(0deg)  translateX(95px) }
}

<div id="btnCont"> <button id="btn" class="rotUp movUp">button</button> </div>

score 0 · Answer 2 · answered Jul 15 '16 at 21:14

Animations are essentially applying styles to elements, in the way JS applies styles directly to the node.

So when you apply a single animation, it overwrites your stylesheet in the same way that applying a style directly to the element with the style attribute takes precedence over a stylesheet.

When you apply two animations, the second overwrites the first, because you can only have one winning style definition. This is also why you don't get both an X and Y transform when you define an animation like

@keyframes changeStuff{ 
  0%{ transform:rotateX(90deg) }
  100%{ transform:rotateY(90deg)  }
}

(the transform at 100% overwrites the transform at 0%).

So the solution to your problem is to write a single animation for .rotUp.movUp.

Can we perform multiple transformations on an element through different animations?

2 Answers2