这是一个非常简单的问题，但我找不到关于 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);
}
正如你所看到的,过渡属性正在覆盖 eachother。就目前而言,text-shadow 将动画化,但不是颜色。我如何让他们两个同时动画化?谢谢任何答案。
762
在所有支持过渡的浏览器中，过渡属性均以逗号分隔：
.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;
39
编辑：我对是否删除这篇文章感到困惑。作为理解 CSS 语法的问题，人们知道all存在是很好的，并且有时可能比一百万个单独的声明更可取，具体取决于您的 CSS 的结构。另一方面，它可能会有性能损失，尽管我还没有看到任何支持该假设的数据。目前，我希望人们对此有所了解。
原始帖子:
您还可以简单地使用：
.nav a {
transition: all .2s;
}
FWIW：all是隐含的，如果没有指定，所以transition: .2s;将带你到同一个地方。
31
类似以下内容将允许同时进行多个转换：
-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;
30
如果你让所有的属性动画相同，你可以分别设置每个，这将允许你不重复 code。
transition: all 2s;
transition-property: color, text-shadow;
这里有更多关于它的信息：CSS transition shorthand with multiple properties?
我会避免使用属性所有（过渡属性覆盖 '所有'），因为你可能会结束不必要的行为和意外的性能命中。
本站系公益性非盈利分享网址，本文来自用户投稿，不代表码文网立场，如若转载，请注明出处
评论列表（13条）