possible to transition outline color with css3 - html

Question

Is it not possible to transition outlines with css3?
body{margin:10px;padding:0px;}
#tDiv{
background-color:#999;
width:500px;
height:500px;
color:black;
outline: 5px dashed #222;
-moz-transition: color 2s;
-o-transition: color 2s;
-webkit-transition: color 2s;
transition: color 2s;
-moz-transition: outline-color .7s ease-out;
-o-transition: outline-color .7s ease-out;
-webkit-transition: outline-color .7s ease-out;
transition: outline-color .7s ease-out;
-moz-transition: background-color .7s ease-out;
-o-transition: background-color .7s ease-out;
-webkit-transition: background-color .7s ease-out;
transition: outline-background .7s ease-out;
}
#tDiv:hover{
color:green;
background-color:gold;
outline: 5px dashed magenta;
}
http://jsfiddle.net/loren_hibbard/uKGCc/
This just changes the outline immediately..
Thanks
​

Answer 1

If you want to apply multiple different transitions, you have to coalesce them into one rule (plus repeat them with the necessary prefixes):
-webkit-transition: color 2s, outline-color .7s ease-out, background-color .7s ease-out;
-moz-transition: color 2s, outline-color .7s ease-out, background-color .7s ease-out;
-o-transition: color 2s, outline-color .7s ease-out, background-color .7s ease-out;
transition: color 2s, outline-color .7s ease-out, background-color .7s ease-out;
Example: http://jsfiddle.net/UF3Ht/6/
https://developer.mozilla.org/en-US/docs/CSS/transition-property
transition:
[<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>
[, [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>]]*
When you use the same property multiple times, only the last one will be applied as usual:
transition: outline-color .7s ease-out; /* this will be overridden */
transition: background-color .7s ease-out; /* this will be used */