CSSを動作させるのに苦労する

Question

私は自分の頭をCSS3トランジションに巻きつけようとしています。私の理解に何か間違いがあるのか​​、ブラウザが協力していないのか分かりません。

まず第一に、バージョン10以降では、Operaは移行をサポートすると考えられていましたが、transitionも-o-transitionも11.62では何もしていないようです。あるいは、Operaは別の構文を使用していますか？

とにかく、私は今のところ

div {transition:background 2s;} 
div:hover {background:lime} 

OKを書き込むことによって、他のほとんどのブラウザでホバリングにinとout背景色のフェードを作ることができる、と私はまた、背景がフェードインするようにそれを作ることはできませんが、そのような中

div:hover {transition:background 2s; background:lime} 

と背景はフェードアウトその

はなく、を書き込むことによって、アウト：

div {transition:background 2s;} 
div:hover {transition:background 0s; background:lime} 

しかし、なぜそれが起こるのか分かりません。ドキュメントによれば、継続時間が0sの遷移は効果がないと思われるので、最後の結果と異なる結果が得られるのはなぜですか？

jsFiddle

Answer 1

あなたの例から、予想通りに動作しているようです。 遷移はある状態から別の状態に実行されます。

私は可能な限りこれを説明しようとします。

最後のものでは、<div>の通常状態での2秒のトランジションと、ホバー状態の<div>での0のトランジションがあります。

何が起こっていますか？

1. あなたは<div>に置くと、:hoverなどの状態変化がdiv:hoverための遷移が実行されます。アニメーションが実行されないように0のtrasitionがあります。
2. <div>からマウスを削除すると、状態は:hoverから正常に戻り、正常状態のdivの遷移が実行されます。あなたは2秒でこれを持っています。

何が起こっているのか、移行の仕組みについて説明していますか？

Answer 2

私は、あなたが探していることはeaseタイミング機能であると仮定します。

したがって、CSSルールは次のようになります。

.class { 
    transition: property(ies) duration timing-function; 
} 

.class:hover { 
    property(ies): new value; 
} 

Operaの場合、正確なプロパティを定義する必要があります。あなたの場合、の背景はですが、の背景色はです。