css過渡：背景顏色和寬度'取消'對方？

Question

我想改變div 背景顏色和寬度鼠標懸停。然而，不能讓它同時工作，改變bg-color作品，但在3秒內改變寬度不會。 CSS代碼：

div { 
    background-color:gold; 
    width:100px;  
    transition: width 3s ease; 
    transition: background-color 3s ease; 
} 

div:hover{ 
    background-color:#f00; 
    width:200px; 
    } 

小提琴：https://jsfiddle.net/f61ashbu/ 我怎樣才能解決這個問題？

Answer 1

使用CSS 過渡：3S緩解;

看到片斷

div { 
 
    background-color:gold; 
 
    width:100px;  
 
    transition:3s ease; 
 
} 
 

 
div:hover{ 
 
    background-color:#f00; 
 
    width:200px; 
 
    }

<div> 
 
    Lorem... 
 
</div>

Answer 2

你必須寫多次轉變爲一個規則由逗號

div { 
 
    background-color: gold; 
 
    width: 100px; 
 
    transition: width 3s ease, background-color 3s ease; 
 
} 
 

 
div:hover { 
 
    background-color: #f00; 
 
    width: 200px; 
 
}

<div> 
 
    Lorem... 
 
</div>

您還可以使用transition: all 3s ease分隔，但是這將在動畫中使用:hover其他屬性。

Answer 3

使用transition: all;

div { 
 
    background-color:gold; 
 
    width:100px;  
 
    transition: all 3s ease; 
 
} 
 

 
div:hover{ 
 
    background-color:#f00; 
 
    width:200px; 
 
    }

<div> 
 
    Lorem... 
 
</div>

Answer 4

您覆蓋第一個聲明，但是要執行這兩個，所以你有,到單獨它。

transition: background-color 3s ease, width 3s ease; 

Answer 5

嘗試使用all作爲[transition-property]，因爲您現在只選擇背景色。

transition: all 3s ease;