0
  1. ホバーすると別の画像に変わる背景画像があります。
  2. この効果を示すためにトランジションを使用しました。
  3. トランジションが終了すると、フォーカスを失ったとき (ホバーしない) に同じトランジションを使用して古い画像が再び表示されます。

実際の例を参照してください (クロムを使用): http://jsfiddle.net/WZqrY/3/

私の問題: 最初のトランジションの途中でマウスを離しても、2 番目のトランジション効果が現れません。マウスを画像内に 1 秒間移動してから、画像の外に移動してみてください。どうすればこれをスムーズに進めることができますか？

注: 画像の代わりに色を使用すると、この効果は私のふりをした方法で機能します。

4

1 に答える 1

0

背景画像の遷移は、計画外の「副作用」のようで、完全に機能しておらず、ブラウザー間でのサポートが非常に限られています。

「これは、Chrome 18 以降と、2012 年以降にビルドされた Webkit Nightlies でのみ機能します。これは、CSS4 クロスフェード作業の副作用のようです」 -ソース

今のところ、「コンテナー内の 2 つの画像」ソリューションを使用することをお勧めします - http://jsfiddle.net/WZqrY/4/

これは、トランジションをサポートするすべてのブラウザーで機能します。

于 2012-06-28T00:08:54.207 に答える