Question

在CSS中，要将多个转换应用于一个规则中的同一个元素，必须按如下方式编写： var boxTypes = new string[] { "Banana", "Apple", "Apple", "Banana" }; var boxSizes = new int[] { 31, 16, 35, 8 }; int bigBoxSize = 20; bool hasBigAppleBox = boxTypes.Zip(boxSizes, (type, size) => (type == "Apple" && size >= bigBoxSize) ? 1 : 0) .Sum() > 0;等。但是如何在多个动画中添加多个变换？例如：

.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完全被忽略了。

Answer 1

转换可以同时使用多个规则/值。您可以混合这些值并添加任意数量的步骤。

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>

Answer 2

动画本质上是将样式应用于元素，就像JS将样式直接应用于节点一样。

因此，当您应用单个动画时，它会覆盖样式表，就像将样式直接应用于元素一样，样式属性优先于样式表。

当你应用两个动画时，第二个会覆盖第一个动画，因为你只能有一个获胜的风格定义。这就是为什么在定义像

这样的动画时不能同时获得X和Y变换的原因

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

（100％的变换会将变换覆盖为0％）。

因此，问题的解决方案是为.rotUp.movUp编写单个动画。

我们可以通过不同的动画对元素进行多次转换吗？

2 个答案: