如何在单独的CSS类中保持单独的转换不被彼此覆盖？

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

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

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

第二类处理线性动画：

  .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

在另一种情况下--当两者都应用于一个元素时，它们实际上是相互覆盖的，这样，无论最后应用哪一个，都是赢得

转换属性

值的人，并且覆盖的属性没有应用转换

---

有什么方法可以这样应用单独的转换类吗？

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

.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

来实现（视觉上）相同的效果。

如果属性数量有限，您可以依赖如下CSS变量：

/*要添加到所有元素的主类*/
.过渡{
过渡属性：左、下、变换、不透明度、高度；
转换持续时间：var（--l-dur，0s）、var（--b-dur，0s）、var（--t-dur，0s）、var（--o-dur，0s）、var（--h-dur，0s）；
转换延迟：var（--l-del，0s）、var（--b-del，0s）、var（--t-del，0s）、var（--o-del，0s）、var（--h-del，0s）；
}
/**/
.轮换{
--t-dur:0.4s；
}
.线性{
--l-dur:0.8s；
--b-dur:0.8s；
}
.成长{
--h-dur:1s；
}
.表演{
--o-dur:0.5s；
--o-del:0.8s；
}

一门速记课，结合了您需要的所有内容，包括：

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

---

可以使用不同的包装器元素