title: How to have multiple CSS transitions on an element?
body: <p>It's a pretty straightforward question but I can't find very good documentation on the CSS transition properties. Here is the CSS snippet:</p>
  
  <pre><code>    .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);
  }
  </code></pre>
  
  <p>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.</p>