web-dev-qa-db-ja.com

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

画像上でホバー解除クラスをまったく記述できるかどうか疑問に思っていましたか？

私が達成しようとしているのは、誰かが画像の上にホバリングするとフェードインし、ホバリングを解除するとフェードアウトすることですか？

私のコードはここにあります。誰かが画像の上にカーソルを合わせるとフェードインが機能しますが、ホバーするときにフェードアウトする必要があります。

http://jsfiddle.net/L7XCD/

csscss3jsfiddle
12
user1506962

これはあなたのために働くはずです！ 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;
}​

彼は移行イージーインアウトを使用していたので、同じ移行機能を使用する方が良いと思いました。

詳細については、 document here here を確認してください

それが役に立てば幸い！

34
Luis

http://jsfiddle.net/L7XCD/2/ hover-tagなしで要素に遷移効果を追加するだけです

4
Chris