html - 我们可以通过不同的动画对一个元素进行多次变换吗？

Question

在 CSS 中，要在一个规则中对同一元素应用多个转换，必须这样写: .selector{ transform:translateY( *value* ) scale( *value*) rotateZ(*value*) 等 但是如何在多个动画中添加多个转换？示例:

@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>

我想同时执行rotateUp 和moveUp。就像现在一样，rotateUp 被完全忽略了。

Answer 1

transform 一次可以采用多个规则/值。您可以混合使用这些值并根据需要添加任意数量的步骤。

基本上:

@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>