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

这是一个非常简单的问题，但我找不到关于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);
}

---

如您所见，转换属性正在相互覆盖。此时，文本阴影将设置动画，但不会设置颜色。如何让它们同时设置动画？感谢您的回答。

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

-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;

---

示例：

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

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

ease

是默认的计时功能，因此您不必指定它。如果确实需要

线性

，则需要指定：

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

这开始变得重复，因此如果要在多个属性中使用相同的时间和计时功能，最好继续使用各种

转换-*

属性，而不是简写：

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

---

编辑：我对是否删除这篇文章感到困惑。就理解CSS语法而言，人们知道

所有的
都存在是件好事，有时可能比一百万个单独的声明更可取，这取决于CSS的结构。另一方面，它可能会对性能造成影响，尽管我还没有看到任何数据支持这一假设。现在，我不说了，但我想让人们知道这是一个混合的袋子

原职：
您还可以简单地使用：

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

FWIW:
all
如果未指定，则表示所有，因此
转换：.2s
会将您带到相同的位置。
这里有一个较少的混合，用于同时转换两个属性：

.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;
}

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

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

这里有更多关于它的信息：

我会避免使用属性all（transition属性覆盖“all”），因为最终可能会出现不想要的行为和意外的性能影响。
可以使用不同的持续时间、延迟和计时函数值设置多个转换。要分割不同的转换，请使用
，

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

参考：
也可以避免完全指定属性

#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;
 }

实际上，你可以删除“all”，因为这是默认值，除非另有规定。+1是一个很好的分数，但我认为将其保留在那里是非常有用的，特别是为了团队间的一致性和理解。注意这一点！如果为手机开发，再加上硬件加速元素，会使新设备故障，旧设备无法使用。谢谢，@CanerŞahin。你能给我们一些文档或基准测试工具来帮助人们理解这一点吗？此外，您是否看到证据表明“all”比根本不使用说明符更糟糕？@XML解释它的方式有两个负面影响。1、由于使用“全部”，浏览器会添加额外的资源。浏览器将密切关注该元素，等待任何性能较差且可能创建页面jank的更改。2，如果开发人员稍后加入背景色，则可能会产生意想不到的效果，而背景色将被转换，这可能不是预期的或所需的。autoprefixer甚至更好！autoprefixer+stylus FTW。我假设因为转换是一个顺序重要的链，所以如果您习惯于函数链接，语法会感觉很好，而转换需要一个完全独立元素的无序列表，所以逗号适合作为CSS中转换的一般注释，我们应该记住，一个接一个地使用多个转换定义是行不通的，为了实现这一点，这些定义必须在同一个定义中（如这里的SA中）。根据CSS的基本规则，“最新”规则适用，因此如果在单独的行中有多个定义，则只应用最后一个定义。Fyidon’不要忘记，对于safari/ipad来说，
transition:all
是非常有缺陷的：
#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;
 }