css - CSS3を使用して画像ホバーでフェードインフェードアウトしますか？

Question

画像にホバー解除クラスを表示することは可能かどうか疑問に思いました。

私が達成しようとしているのは、誰かが画像にカーソルを合わせるとフェードインし、ホバーを解除するとフェードアウトするということです。

これが私のコードです。誰かが画像にカーソルを合わせるとフェードインが機能しますが、画像にカーソルを合わせるとフェードインする必要があります...これが理にかなっていることを願っています。

http://jsfiddle.net/L7XCD/

Answer 1

これはあなたのために働くはずです！http://jsfiddle.net/L7XCD/1/

これを説明するために素晴らしいmozillaドキュメントを使用しましょう：

Transition rovide a way to control the speed of animation changes to CSS properties. Instead of having the animation changes take effect instantly, you can transition the property changes over a specified time period.

また、遷移タイミング関数（イーズ、リニア、イージーイン、イージーアウト、イージーインアウト）を使用しました

Timing functions determine how intermediate values of the transition are calculated. The timing function can be specified by providing the graph of the corresponding function, as defined by four points defining a cubic bezier

CCSマークアップ：

img {
    opacity: 0.6;
    transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -webkit-transition: opacity 1s ease-in-out;
}
img:hover {
    opacity: 1.0;
    transition: opacity .55s ease-in-out;
    -moz-transition: opacity .55s ease-in-out;
    -webkit-transition: opacity .55s ease-in-out;
}​

彼はトランジションイーズインアウトを使用していたので、同じトランジション関数を使用する方が良いと思いました。

詳細については、こちらのドキュメントを確認してください

それが役に立てば幸い！

Answer 2

http://jsfiddle.net/L7XCD/2/ホバータグ なしで要素にトランジション効果を追加するだけです