CSSプロパティまとめ-アニメーション編
頭の整理のために、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からエンジニアになるためのノウハウをブログで発信しています。
また、YouTubeでの動画解説も始めました。 YouTubeのvideoIDが不正です
インスタの発信も細々とやっています。
興味がある方は、ぜひリンクをクリックして確認してみてください！
Discussion