問題描述
可以使用 css3 轉換輪廓顏色 (possible to transition outline color with css3)
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
‑‑‑‑‑
參考解法
方法 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 */