transitionの対象となるプロパティを指定する方法を見ていきます。

・今回はアニメーションだけでなく色の変化もつけていきたいと思います。移動させるアニメーションに加えて色をピンクから緑に変えていくようなアニメーションも追加させようと思います。

・まずは.animation:hoverの方はtranslateXを30px移動するようにします。また変化後にボックスの背景色を変えたいのでbackground: green;としていき、２つプロパティが存在する状態を作ります。

・このままではtransition-propertyがtransformだけなので色のほうはパッと一瞬で切り替わってしまうので、.animationのtransition-propertyにtransformだけでなく、backgroundプロパティも読み込ませて行きたいと思います。

・こちらにtransformとbackground と追加しカンマ区切りで書いてあげれば OK です。

・それから、 transition プロパティですが、全てのプロパティを transition の対象にしたい場合は all としてあげても OK ですが、アニメーションさせたくないものまでアニメーションしてしまうこともあるので一般的には一つづつプロパティを追加していくことをおすすめします。

・リロードで、フワッと色が出ましたが、これはページ読み込み時にも transition が効いてしまうという Chrome 特有のバグなので、直し方について見ていきます。

・ページの読み込み時にも transition が効いてしまうこの Chrome のバグですが、回避方法としては、なんらかのスクリプトを読み込めば OK です。

・簡単にしたいなら script タグの間に半角空白を入れてあげてください。

-広告-

楽天で購入

楽天で購入