1

CSS3 トランジションに頭を悩ませようとしていますが、私の理解に何か問題があるのか​​ 、ブラウザが連携していないのかわかりません。

まず第一に、Opera はバージョン 10 かそこらからトランジションをサポートするはずだと思っていましたが、11.62 ではどちらtransitionも-o-transition何もしていないようです。または、Opera は別の構文を使用しますか?

とにかく、書くことで、他のほとんどのブラウザでホバリング時に背景色をフェードインおよびフェードアウトさせることができます

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

ここまではOKです。また、背景がフェードインするがフェードアウトしないようにすることもできます。

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

背景はフェードアウトしますが、次のようにはインしません。

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

しかし、なぜそれが起こるのか理解できません。ドキュメントによると、0s持続時間のあるトランジションは何の効果もないと考えられているのに、最後のトランジションの結果が異なるのはなぜですか?

jsフィドル

4

2 に答える 2

3

あなたが探しているのはeaseタイミング機能だと思います。

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

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

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

Opera の場合、正確なプロパティを定義する必要があります。あなたの場合、それはbackgroundプロパティではなく、background-colorプロパティになります。

于 2012-04-04T12:08:55.177 に答える
1

あなたの例から、期待どおりに動作しているように見えます。遷移は、ある状態から別の状態へと実行されます。

私はできる限りこれを説明しようとします。

最後のものでは、通常の状態で 2 秒の遷移があり、ホバー状態で<div>0 の遷移があり ます。<div>

それで、何が起こっているのですか？

  1. にカーソルを合わせると<div>、状態が に変わり:hover、 の遷移div:hoverが実行されます。0 のトラジションがあるため、アニメーションは実行されません。
  2. <div>状態からマウスを離すと、通常の状態:hoverに戻るため、div通常の状態での遷移が実行されます。あなたはこれを2秒で持っています。

これは、何が起こっているのか、遷移がどのように機能するのかを説明していますか?

于 2012-04-04T12:17:10.027 に答える