css transition 如何分开控制不同的动画

在CSS中，可以使用transition属性来定义元素的过渡效果。要分别控制不同的动画，可以通过为不同的属性设置不同的过渡效果来实现。

例如，假设你有一个元素，要实现鼠标悬停时的颜色变化和透明度变化动画。你可以使用两个不同的过渡效果来分别控制颜色和透明度的变化。

首先，定义一个过渡效果来控制颜色的变化：

.element {
  transition: color 0.3s ease;
}

.element:hover {
  color: red;
}

上述代码中，当鼠标悬停在元素上时，颜色将从原来的颜色过渡到红色，过渡时间为0.3秒，过渡效果为ease。

然后，定义另一个过渡效果来控制透明度的变化：

.element {
  transition: opacity 0.5s ease;
}

.element:hover {
  opacity: 0.5;
}

上述代码中，当鼠标悬停在元素上时，透明度将从原来的值过渡到0.5，过渡时间为0.5秒，过渡效果为ease。

通过这种方式，你可以分别控制不同的动画效果，只需要为不同的属性设置不同的过渡效果即可