需要注意的一件重要的事情是CSS转换属性本身是一个简写-正如在MDN Web Docs中提到的那样:

transition CSS属性是transition-property、transition-duration、transition-timing-function和transition-delay的简称。

这种简写的理想用法是将单个转换的各种组成属性结合起来。如果这被用来组合多个过渡，它将开始变得笨拙。

因此，当你在同一个元素上有超过2个不同组成属性的转场时，单独写它们比使用转场简写更容易。例如:

这是一个元素上多个转换的简写版本(选项1):

transition: transform 0.5s ease-in-out, box-shadow 0.2s ease-out, filter 0.1s ease-out, color 0.25s ease-in 0.2s;

如你所见，这变得笨拙，有点难以想象。 同样的CSS可以像这样应用(选项2):

transition-property: transform, box-shadow, filter, color;
transition-duration: 0.5s, 0.2s, 0.2s, 0.25s;
transition-timing-function: ease-in-out, ease-out, ease-out, ease-in;
transition-delay: 0s, 0s, 0s, 0.2s

当然，最终这一切都取决于您对输入和维护源代码的偏好。但我个人更喜欢第二种选择。

TIP:

使用它的另一个好处是，如果一个Constituent属性对于所有转换都是相同的，则不需要多次提到它。例如，在上面的例子中，如果所有的过渡持续时间都是相同的(0.5s)，你可以这样写:

transition-property: transform, box-shadow, filter, color;
transition-duration: 0.5s;
transition-timing-function: ease-in-out, ease-out, ease-out, ease-in;
transition-delay: 0s, 0s, 0s, 0.2s

如果你有几个特定的属性，你想以同样的方式转换(因为你也有一些属性，你特别不想转换，比如不透明度)，另一个选择是这样做(为了简洁，省略了前缀):

.myclass {
    transition: all 200ms ease;
    transition-property: box-shadow, height, width, background, font-size;
}

第二个声明覆盖上面的简写声明中的all，(偶尔)使代码更简洁。

/*前缀省略*/ .box { 身高:100 px; 宽度:100 px; 背景:红色; 箱影:红色0 0 5px 1px; 过渡:所有500毫秒轻松; /*注意:不过渡宽度*/ 过渡属性:高度，背景，框影; ｝ .box:{徘徊 高度:50 px; 宽度:50 px; 盒子阴影:蓝色0 0 10px 3px; 背景:蓝色; ｝ <p>演示的悬停框</p> < div class = "盒子" > < / div >

Demo

需要注意的一件重要的事情是CSS转换属性本身是一个简写-正如在MDN Web Docs中提到的那样:

transition CSS属性是transition-property、transition-duration、transition-timing-function和transition-delay的简称。

这种简写的理想用法是将单个转换的各种组成属性结合起来。如果这被用来组合多个过渡，它将开始变得笨拙。

因此，当你在同一个元素上有超过2个不同组成属性的转场时，单独写它们比使用转场简写更容易。例如:

这是一个元素上多个转换的简写版本(选项1):

transition: transform 0.5s ease-in-out, box-shadow 0.2s ease-out, filter 0.1s ease-out, color 0.25s ease-in 0.2s;

如你所见，这变得笨拙，有点难以想象。 同样的CSS可以像这样应用(选项2):

transition-property: transform, box-shadow, filter, color;
transition-duration: 0.5s, 0.2s, 0.2s, 0.25s;
transition-timing-function: ease-in-out, ease-out, ease-out, ease-in;
transition-delay: 0s, 0s, 0s, 0.2s

当然，最终这一切都取决于您对输入和维护源代码的偏好。但我个人更喜欢第二种选择。

TIP:

使用它的另一个好处是，如果一个Constituent属性对于所有转换都是相同的，则不需要多次提到它。例如，在上面的例子中，如果所有的过渡持续时间都是相同的(0.5s)，你可以这样写:

transition-property: transform, box-shadow, filter, color;
transition-duration: 0.5s;
transition-timing-function: ease-in-out, ease-out, ease-out, ease-in;
transition-delay: 0s, 0s, 0s, 0.2s

我认为这是可行的:

.element {
   -webkit-transition: all .3s;
   -moz-transition: all .3s;
   -o-transition: all .3s;
   transition: all .3s;
}

这帮助我理解/简化了我所需要的动画:

// SCSS - Multiple Animation: Properties | durations | etc.
// on hover, animate div (width/opacity) - from: {0px, 0} to: {100vw, 1}

.base {
  max-width: 0vw;
  opacity: 0;

  transition-property: max-width, opacity; // relative order
  transition-duration: 2s, 4s; // effects relatively ordered animation properties
  transition-delay: 6s; // effects delay of all animation properties
  animation-timing-function: ease;

  &:hover {
    max-width: 100vw;
    opacity: 1;

    transition-duration: 5s; // effects duration of all aniomation properties
    transition-delay: 2s, 7s; // effects relatively ordered animation properties
  }
}

对象中的所有转换属性(duration, transition-timing-function等)都适用。的基类

通过在转换不透明属性时使用0.5 s的延迟，元素在其高度转换期间将是完全透明的(因此是不可见的)。你唯一能看到的就是不透明度的改变。所以你会得到和把height属性从过渡中去掉一样的效果:

"过渡:不透明度。5s。5s;"

这是你想要的吗?如果不是，你想看到高度的转变，你不能让不透明度在整个转变过程中为零。