cssアニメーションを勉強中です。
transition
プロパティーをどこで指定してあげれば良いのかよく分からなかったので、以下の3パターンを書いて試してみました。
以下の理解であっているか教えて頂ければ幸いです!また、最後に書いた質問にお答え頂けると嬉しいです!
1
div { width: 100px; height: 100px; background-color: yellow; } div:hover { background-color: red; transition: all 1s ease-in 0ms; }
https://codepen.io/anon/pen/BPXXzg
この場合は、hoverが外れた時はアニメーションがかからない。アニメーションがかかるのは、hover時のみ。
hoverした時にアニメーションを走らせたい場合は、div:hover
の方でtransition
プロパティーの設定をしてあげる。
1
div { width: 100px; height: 100px; background-color: yellow; transition: all 3s ease-out 0ms; } div:hover { background-color: red; transition: all 1s ease-in 0ms; }
https://codepen.io/anon/pen/yqmmaJ
この場合はhover時もhoverが外れた時もアニメーションが走る。ただし、hover時はdiv:hover
の方で設定したtransition
の通りにアニメーションが走り、hoverが外れた時はdiv
の方で設定したtransition
の通りにアニメーションが走る。
3
div { width: 100px; height: 100px; background-color: yellow; transition: all 1s ease-in 0ms; } div:hover { background-color: red; }
https://codepen.io/anon/pen/LBwwZd
この場合は、div
の方にしかtransition
を指定していないのにも関わらず、hover時もhoverが外れた時もdiv
の方で指定したtransition
プロパティーの設定どおりにアニメーションが走る。他の2つと違う挙動をもとに考えると、この指定の場合、hoverから外れた時にのみアニメーションが走るものだと思っていたが、そうではなかったため混乱した。
これはなぜなのか?また、hoverから外れた時にのみアニメーションを走らせたい場合はどうすれば良いのか?
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/08/18 11:55