Writer:Asai (20.09.24)

CSSのみでロールオーバーに簡単なアニメーションを設定する方法です。CSSのみのため、カスタマイズも簡単ですし、一回理解できてしまえば、色々な応用もできます。
実装例
上記のように、ロールオーバーすると画像が左斜め上に動き、テキストにアンダーラインが引かれます。このようなアクションが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の値;
}
コラム執筆中
アイビーネットでは、ホームページに関するコラムを随時執筆中です。