How to have multiple CSS transitions on an element?

Question

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.

Answer 1

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

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

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; 

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; 

Answer 2

EDIT: I'm torn on whether to delete this post. As a matter of understanding the CSS syntax, it's good that people know all exists, and it may at times be preferable to a million individual declarations, depending on the structure of your CSS. On the other hand, it may have a performance penalty, although I've yet to see any data supporting that hypothesis. For now, I'll leave it, but I want people to be aware it's a mixed bag.

Original post:

You can also simply significantly with:

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

FWIW: all is implied if not specified, so transition: .2s; will get you to the same place.