是否无法使用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/
这只会立即改变轮廓..
由于
答案 0 :(得分:9)
如果要应用多个不同的过渡,则必须将它们合并为一个规则(并使用必要的前缀重复它们):
-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 */