How to implement multiple CSS transition effects

Question

This is a pretty straightforward question, but I can't find good documentation on 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 overwrite each other. Currently, the text shadow animates, but the color does not. How can I make them animate at the same time? Thanks for any answers.

Answer 1

Edit: I am hesitant to delete this post. In terms of understanding CSS syntax, letting people know that all exists is good, and depending on the structure of CSS, it may be preferable to a million separate declarations. On the other hand, it might have a performance penalty, although I haven't seen any data to support this assumption. I'll leave it at that for now, but I hope people realize it's a two-way street.

Original post:

You can also simply use the following code:

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

FWIW: If not specified, all is the default, so transition: .2s; can also achieve the same effect.

Answer 2

In all browsers that support transition effects, transition attributes are separated by commas:

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

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

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

This is starting to get repetitive, so if you're going to use the same time and time function on multiple properties, it's better to use the various transition-* properties instead of the shorthand form:

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