🚀

CSSプロパティまとめ-アニメーション編

2022/12/08に公開約4,400字

頭の整理のために、CSSにはどのようなプロパティがあるのかということをまとめました。

割と詳しく説明しますので、CSSの理解に不安がある人は参考になるはずです。

今回は、アニメーションに関わるプロパティについて解説していきます。

アニメーションを知っておくことで、JSを使わずにリッチなデザインを実現できるので学んでおいて損はないです。

CSSのアニメションの構成要素としては、主に次の3つが挙げられます。

  • CSS Transition
  • CSS Animation
  • Keyframe Animation

それぞれ具体的に説明していきます。

CSS Transition

CSS Transitionは、プロパティに変更があった時に、一定時間でプロパティを変化させる機能になります。

要は、変化するスピードなどを設定できるわけです。

例えば、通常時とhover時のスタイルの切り替えをゆっくりにできたりします。

具体的には、以下のプロパティを使って細かく設定が可能です。

  • transition-property
  • transition-duration
  • transition-delay
  • transition-timing-function

こちらもそれぞれ解説していきます。

transition-property

どのプロパティにアニメーションを適用するか指定するのプロパティになります。

例えば、background-colorやheight、widthなどを設定できます。

設定できるプロパティは多々ありますが、基本的にはallを指定して全てを対象にすることが多いです。

transition-duration

アニメーション開始から終了までの所要時間を指定するプロパティになります。

例えば、1s(1秒)や0.5s(0.5秒)など指定できます。

transition-delay

アニメーションが開始するまでの遅延時間を指定するプロパティになります。

要は、アニメーションの開始を指定した時間だけ遅らせることができます。

こちらもtransition-durationと同じように、1sなどで設定します。

transition-timing-function

アニメーションのイージングを指定するプロパティになります。

イージングとは動きの加減を意味します。

なので例えば、「最初だけゆっくり」や、「最後だけゆっくり」などを指定できます。

主なプロパティ値は次のとおりです。

プロパティ値 説明
ease 滑らかに変化します(最初と最後がゆっくり)
linear 一定の速度で変化します
ease-in 最初はゆっくりで、だんだん速くなります
ease-out 最初は速く、だんだんゆっくりになります
ease-in-out easeと似ていますが、速度が異なります
step-start 一瞬で変化します
step-end こちらも一瞬で変化しますが、transition-durationの時間がたった後で変化します。

また、これらの4つのプロパティはtransitionプロパティというショートハンドで一括指定が可能です。

transform

こちらはアニメーションのためのプロパティではありませんが、transitionと一緒に使用されることが多いのでついでに解説していきます。

これを使うことで、要素に動きをつけることができます。

具体的には、移動、回転、伸縮、傾斜の4つがあり、2次元的な動きだけでなく、3次元的動きも可能です。

なので、これとtransitionを組み合わせることで、簡単なアニメーションを作ることもできるわけです。

主な値は次のとおりです。

プロパティ値 説明
rotate 回転
translate 移動
scale 伸縮
skew 傾斜

これらを実現したいアニメーションに合わせて実装していく分けです。

Keyframe Animation

次に、キーフレームアニメーションについて解説していきます。

キーフレームアニメーションとは、アニメーションの開始(0%)から終了(100%)までの任意の経過地点に、プロパティを指定できるアニメーションのことです。

まずは、具体例を見た方が早いと思うのでお見せします。

@keyframes rotation {
  0% {
    transform: scale(.3);
  }

  50% {
    transform: scale(.6) rotate(-45deg);
    background: red;
  }

  100% {
    transform: scale(1) rotate(180deg);
    background: blue;
  }
}

%が過ぎた秒数、その瞬間ごとのプロパティを指定できます。

このように書くことで、過ぎた秒数ごとにアニメーションを作ることができます。

キーフレームアニメーションの名前は、@keyframesの後に固有の名前をつけることができます。

これは次に説明するCSS Animationで使います。

CSS Animation

こちらはキーフレームアニメーションを適用できる機能になります。

このプロパティでは、先ほど作ったアニメーションを適用させていきます。

「transitionと何が違うのか」と思うかもですが、transitionは飽くまで2点間の動きを指定できるだけです。

けれど、CSS Animationを使えば、さらに細かく変化させることができます。

なので、手軽なアニメーションはtransition、凝ったアニメーションはanimationで実装するという認識でOKです。

そして、こちらには以下のようなプロパティが設定できます。

  • animation-name
  • animation-duration
  • animation-timing-function
  • animation-delay
  • animation-iteration-count
  • animation-direction
  • animation-fill-mode
  • animation-play-state

こちらもそれぞれ解説していきます。

animation-name

要素に適用するキーフレームアニメーションを指定するプロパティです。

先ほど作った、keyframe animetionの名前を指定します。

animation-duration

アニメーション開始から終了までの所要時間を指定するプロパティです。

1sや15sなどで設定します。

animation-timing-function

アニメーションのイージングを指定するプロパティです。

機能としては、transition-timing-functionと同じです。

animation-delay

アニメーションが開始するまでの遅延時間を指定するプロパティです。

こちらも、1sや15sなどで設定します。

animation-iteration-count

アニメーションのループ回数を指定するプロパティです。

1を指定した場合は1回、2を指定した場合は2回ループされます。

また、infiniteを指定した場合は、無限に繰り返されます。

初期値は1になります。

animation-direction

アニメーションの再生方向を指定するプロパティです。

プロパティ値は次のとおりです。

プロパティ値 説明
normal 標準の方向で実行します
reverse 逆順で実行します
alternate 繰り返し回数が奇数の場合は標準、偶数の場合は逆順で実行します
alternate-reverse 繰り返し回数が奇数の場合は逆順、偶数の場合は標準で実行します

多くの場合は、normalかalternateが使われます。

また、初期値はnormalです。

animation-fill-mode

キーフレームアニメーションで指定したプロパティをアニメーション開始前、終了後に適用するかどうかを指定するプロパティです。

要は、「アニメーションで設定したスタイルをアニメーション後も適用されるか」を選べます。

プロパティ値は次のとおりです。

プロパティ値 説明
none 適用されません
forwards 100%の状態が適用されます(animation-timing-functionによって変化します)
backwards 0%の状態が適用されます(animation-timing-functionによって変化します)
both アニメーション開始時は「backwards」、終了時は「forwards」と同じスタイルが適用させれます

animation-play-state

アニメーションを再生中か一時停止にするプロパティです。

running(実行)か、paused(停止)を設定できます。

例えば、hover時だけ動きを止めるなどができるわけです。

そして、こららのプロパティもanimationというショートハンドのプロパティで一括指定ができます。

まとめ

今回は、CSSのアニメーションについてまとめました。

本記事は参考にすれば、リッチなアニメーションを実現できるはずです。

ぜひ、試してみてください。

また、他のCSSプロパティの記事も投稿してますので、よければ参考にしてください!

宣伝

0からエンジニアになるためのノウハウをブログで発信しています。
https://hinoshin-blog.com/

また、YouTubeでの動画解説も始めました。
https://www.youtube.com/channel/UCqaBUPxazAcXaGSNbky1y4g

インスタの発信も細々とやっています。
https://www.instagram.com/hinoshin_enginner/

興味がある方は、ぜひリンクをクリックして確認してみてください!

Discussion

ログインするとコメントできます