如何有一个元件上的多个CSS过渡？ [英] How to have multiple CSS transitions on an element?

问题描述

这是一个pretty简单的问题，但我找不到CSS的转变特性很好的文档。这里是CSS代码片段：

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

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

推荐答案

过渡性质逗号分隔在支持转换所有的浏览器：

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

.nav a {
  -webkit-transition: color .2s, text-shadow .2s;
  /* And so on... */
}

易于是默认的，所以你不必指定它。如果你真的想要线性的，你需要指定它，即 -webkit-过渡：色.2s直线，文字阴影.2s线性;

这篇关于如何有一个元件上的多个CSS过渡？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！