如何在一个元素上有多个 CSS 转换？

How to have multiple CSS transitions on an element?

提问by Eric Thoma

It's a pretty straightforward question but I can't find very good documentation on the CSS transition properties. Here is the CSS snippet:

这是一个非常简单的问题，但我找不到关于 CSS 过渡属性的非常好的文档。这是 CSS 片段：

    .nav a
{
    text-transform:uppercase;
    text-decoration:none;
    color:#d3d3d3;
    line-height:1.5 em;
    font-size:.8em;
    display:block;
    text-align:center;
    text-shadow: 0 -1.5em 0 rgba(255, 255, 255, 0.15);
    -webkit-transition: color .2s linear;
    -moz-transition: color .2s linear;
    -o-transition: color .2s linear;
    transition: color .2s linear;
    -webkit-transition: text-shadow .2s linear;
    -moz-transition: text-shadow .2s linear;
    -o-transition: text-shadow .2s linear;
    transition: text-shadow .2s linear;
}

.nav a:hover
{
    color:#F7931E;
    text-shadow: 0 1.5em 0 rgba(247, 147, 30, 0.15);
}

As you can see, the transition properties are overwriting eachother. As it stands, the text-shadow will animate, but not the color. How do I get them both to simultaneously animate? Thanks for any answers.

如您所见，过渡属性正在相互覆盖。就目前而言，文本阴影将具有动画效果，但颜色不会。如何让它们同时动画？感谢您提供任何答案。

回答by coreyward

Transition properties are comma delimited in all browsers that support transitions:

在所有支持过渡的浏览器中，过渡属性都以逗号分隔：

.nav a {
  transition: color .2s, text-shadow .2s;
}

easeis the default timing function, so you don't have to specify it. If you really want linear, you will need to specify it:

ease是默认的计时功能，因此您不必指定它。如果你真的想要linear，你需要指定它：

transition: color .2s linear, text-shadow .2s linear;

This starts to get repetitive, so if you're going to be using the same times and timing functions across multiple properties it's best to go ahead and use the various transition-*properties instead of the shorthand:

这开始变得重复，因此如果您要跨多个属性使用相同的时间和计时函数，最好继续使用各种transition-*属性而不是速记：

transition-property: color, text-shadow;
transition-duration: .2s;
transition-timing-function: linear;

回答by XML

You can also simply significantly with:

您还可以简单地使用：

.nav a {
    -webkit-transition: all .2s;
}

回答by Delan Azabani

Something like the following will allow for multiple transitions simultaneously:

类似以下内容将允许同时进行多个转换：

-webkit-transition: color .2s linear, text-shadow .2s linear;
   -moz-transition: color .2s linear, text-shadow .2s linear;
     -o-transition: color .2s linear, text-shadow .2s linear;
        transition: color .2s linear, text-shadow .2s linear;

Example: http://jsbin.com/omogaf/2

示例：http: //jsbin.com/omogaf/2

回答by Corey Young

If you make all the properties animated the same, you can set each separately which will allow you to not repeat the code.

如果您将所有属性设置为相同的动画，您可以分别设置每个属性，这样您就不会重复代码。

 transition: all 2s;
 transition-property: color, text-shadow;

There is more about it here: CSS transition shorthand with multiple properties?

这里有更多关于它的内容：CSS transition shorthand with multiple properties?

I would avoid using the property all (transition-property overwrites 'all'), since you could end up with unwanted behavior and unexpected performance hits.

我会避免使用属性 all（transition-property 覆盖“all”），因为您最终可能会出现不需要的行为和意外的性能下降。

回答by Locoroco

.nav a {
    transition: color .2s, text-shadow .2s;
}

回答by Nesha Zoric

It's possible to make the multiple transitions set with different values for duration, delay and timing function. To split different transitions use ,

可以使用不同的持续时间、延迟和计时功能值来设置多个转换。要拆分不同的过渡使用,

button{
  transition: background 1s ease-in-out 2s, width 2s linear;
  -webkit-transition: background 1s ease-in-out 2s, width 2s linear; /* Safari */
}

Reference: https://kolosek.com/css-transition/

参考：https: //kolosek.com/css-transition/

回答by user1445230

Here's a LESS mixin for transitioning two properties at once:

这是一个 LESS mixin，用于一次转换两个属性：

.transition-two(@transition1, @transition1-duration, @transition2, @transition2-duration) {
 -webkit-transition: @transition1 @transition1-duration, @transition2 @transition2-duration;
    -moz-transition: @transition1 @transition1-duration, @transition2 @transition2-duration;
      -o-transition: @transition1 @transition1-duration, @transition2 @transition2-duration;
          transition: @transition1 @transition1-duration, @transition2 @transition2-duration;
}

回答by jerblack

It's also possible to avoid specifying the properties altogether.

也可以完全避免指定属性。

#box {
  transition: 0.4s;
  position: absolute;
  border: 1px solid darkred;
  bottom: 20px; left: 20px;
  width: 200px; height: 200px;
  opacity: 0;
}

#box.on {
  opacity: 1;
  height: 300px;
  width: 500px;
 }