6

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/

これにより、アウトラインがすぐに変更されます。

ありがとう

</ p>

4

1 に答える 1

12

複数の異なるトランジションを適用する場合は、それらを 1 つのルールに結合する必要があります (さらに、必要なプレフィックスを使用してそれらを繰り返します)。

-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;

例: 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'>]]*

同じプロパティを複数回使用すると、最後のプロパティのみが通常どおり適用されます。

transition: outline-color .7s ease-out;    /* this will be overridden */
transition: background-color .7s ease-out; /* this will be used */
于 2012-11-06T19:28:55.457 に答える