CSSだけでロールオーバーにアニメーションを設定する方法

Writer:Asai (20.09.24)

CSSのみでロールオーバーに簡単なアニメーションを設定する方法です。CSSのみのため、カスタマイズも簡単ですし、一回理解できてしまえば、色々な応用もできます。

実装例
ポイントはtransition
transitionを使いこなせば、要所要所で動きを簡単に付けられる！

実装例

上記のように、ロールオーバーすると画像が左斜め上に動き、テキストにアンダーラインが引かれます。このようなアクションがCSSのみで実装可能です。

ポイントはtransition

アニメーションを設定するためには、transitionプロパティを利用します。transitionプロパティは変化を指定するプロパティです。つまり、ロールオーバー前とロールオーバー後のスタイルを用意し、transitionを指定することで、アニメーションが実装できます。

a img{
  transition: 0.4s;
}
a:hover img{
  transform: translate(-4px,-4px);
  box-shadow: 4px 4px rgba(0,0,0,0.2);
}

上記は画像のスタイル指定です。ロールオーバー後に、transformで斜め上に移動と影が表示されるように指定しています。transitionを指定していることで、指定した時間で変化が完了するように指定しています。

figcaption:after{
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0;
  height: 2px;
  background-color: #337ab7;
  transition: 0.4s;
}
a:hover figcaption:after{
  width: 100%;
}

上記はキャプションのスタイル指定です。ロールオーバー前はwidth:0;を指定していますが、ロールオーバー時はwidth:100%;を指定しています。通常だとロールオーバー時に線がパッと付いたり、消えたりだけですが、transitionを指定することでアニメーションが実装されるようになります。

transitionを使いこなせば、要所要所で動きを簡単に付けられる！

transitionを使えば簡単にアニメーションを実装できます。また、transitionのプロパティは多数ありますので、是非参考にしてみてください。

transition-duration	変化完了までの時間を指定
transition-property	変化を適用するcssプロパティを指定
transition-timing-function	変化の度合いを指定
transition-delay	変化開始の時間を指定
transition	上記4つのプロパティを一括指定

transition-duration

s	1sは1秒
ms	1msは1000分の1秒

transition-property

transition-propertyでは、transitionを適用するプロパティを指定します。上記のデモでは、transition-property:color;を指定しているため、colorプロパティが変化の対象になります。

transition-timing-function

ease	最初と最後が緩やかに変化
linear	最後まで一定で変化
ease-in	最初は緩やかに変化し、最後に向けて早くなる
ease-out	最初は早くに変化し、最後に向けて緩やかになる
ease-in-out	最初と最後がかなり緩やかに変化
cubic-bezier	変化の度合いをベジェ曲線で指定

transition-delay

transition-delayで指定した時間後に変化が開始します。

transition

transitionを利用すれば、4つのプロパティをまとめて記述することができます。

セレクタ名 {
  transition:transition-propertyの値 transition-durationの値 transition-timing-functionの値 transition-delayの値;
}

複数記述する場合は、下記のとおりです。

セレクタ名 {
  transition:transition-propertyの値 transition-durationの値 transition-timing-functionの値 transition-delayの値 , transition-propertyの値 transition-durationの値 transition-timing-functionの値 transition-delayの値;
}

アイビーネットのホームページ制作はこちら