Possible transition contour color using css3

Question

Is it not possible to move paths using 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 immediately changes the outline.

thanks

Answer 1

If you want to apply several different transitions, you need to combine 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'>]]* 

If you use the same property several times, only the last will be applied:

 transition: outline-color .7s ease-out; /* this will be overridden */ transition: background-color .7s ease-out; /* this will be used */