如何防止单独的 CSS 类中的单独转换相互覆盖？

Question

我有一个处理旋转动画的 CSS 类：

  .rotation {
    transition-property: transform;
    transition-duration: 0.4s;
    transition-delay: 0s;
  }

以及处理线性动画的第二个类：

.linear {
  transition-property: left, bottom;
  transition-duration: 0.8s;
  transition-delay: 0s;
}

当然，问题是，虽然我打算将这些转换规则应用于不同的属性——transform在一种情况下和left, bottom另一种情况下——当两者都应用于一个元素时，它们实际上是相互覆盖的，这样无论哪一个最后应用的是赢得 值的人transition-property，并且覆盖的属性没有应用于它的转换。

有没有办法以这种方式应用单独的过渡类？

Answer 1

为具有两个类的元素定义新规则：

.linear.rotation {
   transition-property: transform, left, bottom;
   transition-duration: 0.4s, 0.8s, 0.8s;
   transition-delay: 0, 0, 0;
}

确保此规则位于.linear和 的任何现有规则之后.rotation。

顺便说一句，动画top/right/bottom/left属性并不是最好的性能 - 理想情况下使用只是transform因为它避免了昂贵的重新布局。您可以使用translate/ translateX/translateY实现（视觉）相同的效果。