实现多个CSS过渡效果的方法

Question

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

如您所见，过渡属性会互相覆盖。目前，文本阴影会动画显示，但颜色不会。我该如何使它们同时动画显示？感谢任何答案。

Answer 1

编辑：我对是否删除这篇帖子感到犹豫。就理解CSS语法而言，让人们知道all的存在是好的，根据CSS的结构，它可能比一百万个单独的声明更可取。另一方面，它可能会有性能损耗，尽管我还没有看到任何支持这个假设的数据。暂时我会保留它，但我希望人们意识到这是一种两面性。

原始帖子：

你也可以简单地使用以下代码：

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

FWIW：如果未指定，all是默认的，所以transition: .2s;也可以达到相同的效果。

Answer 2

在支持过渡效果的所有浏览器中，过渡属性是用逗号分隔的：

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

ease 是默认的时间函数，所以你不需要指定它。如果你真的想要 linear，你需要明确指定：

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

这开始变得重复了，所以如果你要在多个属性上使用相同的时间和时间函数，最好使用各种 transition-* 属性而不是简写形式：

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