私はdivに変更しようとしています背景色と幅マウスホバー上。しかし、bg-colorの作業を変更しても、3秒で幅を変更することはできません。 CSSコード：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/ どのように私はこの問題を解決することができますか？
使用CSS の移行：3Sが楽。
は
div {
background-color:gold;
width:100px;
transition:3s ease;
}
div:hover{
background-color:#f00;
width:200px;
}<div>
Lorem...
</div>カンマます。またtransition: all 3s easeを使用することができますが、これは:hoverで使用される他のプロパティをアニメーション化します
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;
div {
background-color:gold;
width:100px;
transition: all 3s ease;
}
div:hover{
background-color:#f00;
width:200px;
}<div>
Lorem...
</div>あなたはあなたの最初の宣言を上書きするが、あなたは、あなたが,とそれを区切るために持っているので、両方を実行したいです。
transition: background-color 3s ease, width 3s ease;
Doh ...ヌービックミス、Ty、マーク！ –
[transition-property]としてすべてを使用してみてください。現在、背景色のみが選択されています。
transition: all 3s ease;
使用遷移をスニペット表示：全3Sあなたは同じCSSルールに同じ名前の2つのプロパティを持つことはできませんあなたのCSS –
に容易になります。最後に書き込まれたプロパティは、前のすべてのコピーを上書きし、その値のみが適用されます。しかし、 'transition'を含むいくつかのプロパティはカンマで区切られた複数の値を持つことができます。 –