如何在一个元素上有多个 CSS 转换? [英] How to have multiple CSS transitions on an element?

问题描述

这是一个非常简单的问题，但我找不到关于 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 {
  transition: color .2s, text-shadow .2s;
}

ease 是默认的计时函数，所以你不必指定它.如果你真的想要linear，你需要指定它:

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

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

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

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-property: color, text-shadow;
transition-duration: .2s;
transition-timing-function: linear;

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