Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

possible to transition outline color with css3

possible to transition outline color with css3

Problem

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

Problem courtesy of: 1252748

Solution

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:
   [ ||  ||  ||  
[, [ ||  ||  || ]]*

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 */
Solution courtesy of: biziclop

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

possible to transition outline color with css3

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×