今回は、コーディング初心者のわたしが学んだanimationプロパティについて
初心者の方に向けて紹介したいと思います！
animationとは
キーフレームを適用することができて、細かい動きを実装することができます。
CSSでアニメーションを表現するには2つの設定が必要となります。
1つ目は@keyframes、もうひとつはanimationプロパティです。
@keyframes でアニメーションする要素のアニメーション開始時の状態と終了時の状態を指定し、animationプロパティで細かく設定します。
@keyframes
@keyframes は、アニメーション開始から終了するまで
どのようなアニメーションをするのか指定できるCSSの文法です。
下記のような書き方をします。
@keyframes 任意の名前 {
0%(または、from) {
CSSプロパティ:値;
}
100%(または、to) {
CSSプロパティ:値;
}
}
animationプロパティ
@keyframesで定義した動きの変化と組み合わせて、
詳しく記述したものがanimationプロパティです。
animationプロパティには下記8つのプロパティがあります。
| プロパティ名 | 説明 |
|---|---|
| animation-name | アニメーションの名前 |
| animation-duration | アニメーションの時間 |
| animation-timing-function | アニメーション変化の度合 |
| animation-delay | アニメーションを開始するタイミング |
| animation-iteration-count | アニメーションの繰り返し回数 |
| animation-direction | アニメーションの再生方向 |
| animation-fill-mode | アニメーションが再生されていないときの状態 |
| animation-play-state | アニメーションを再生させるか一時停止させるか |
こちらのDEMOページに、簡単な動きを記載してあるので参考にしてください！
animation-name
先ほど紹介した @keyframes で記述した名前で、@keyframes と紐付けるためのものです。
名前を指定しただけでは、アニメーションは動きましせん。
@keyframes Demo {
0% {
width:100px;
}
100% {
width:500px;
}
}
セレクタ名 {
animation-name: Demo;
}
animation-duration
アニメーションの再生時間を指定します。
指定できる単位は、s または、ms です。
セレクタ名 {
animation-name: Demo;
animation-duration: 5s;
}
この場合は、5秒かけてアニメーションが実行されます。
DEMO
animation-timing-function
animation-timing-function は、変化の度合いを指定できるプロパティです。
一定速度で変化させるか、徐々に早くするなど指定できます。
指定できる値は９つあります。
| プロパティ名 | 説明 |
|---|---|
| ease | 開始時と終了時には緩やかに変化（初期値） |
| ease-in | 開始時は緩やかに、終了時は早く変化 |
| ease-out | 開始時に早く、終了時に緩やかに変化 |
| ease-in-out | easeよりさらに、開始時と終了時は緩やかに変化 |
| linear | 一定速度で変化 |
| step-start | 開始と同時に終了状態に変化 |
| step-end | 終了時に最後の状態に変化 |
| steps(正数, start もしくは 正数, end) | 指定した正数の段階で変化します。第2引数には start または end を指定できます。start を指定すると、 アニメーション開始時から変化します。end を指定すると、アニメーション終了時に変化します |
| cubic-bezier(x軸の値, y軸の値, x軸の値, y軸の値) | 変化の度合いを任意で指定します |
animation-delay
animation-delay は、アニメーションが始まる時間を指定できるプロパティです。
指定できる単位は、s または、ms です。
セレクタ名 {
animation-name: Demo;
animation-duration: 5s;
animation-delay: 2s;
}
この場合は2秒後にアニメーションが開始されます。
DEMO
animation-iteration-count
animation-iteration-count は、アニメーションの繰り返し回数を指定できるプロパティです。
初期値は 1 です。アニメーションを無限に繰り返したい場合は、値に infinite を指定します。
セレクタ名 {
animation-name: Demo;
animation-duration: 5s;
animation-iteration-count: 3;
}
animation-direction
animation-direction は、アニメーションの再生方向を指定できるプロパティです。
値は下記の４つがあります。
| プロパティ名 | 説明 |
|---|---|
| normal | 指定した方向に再生されます |
| reverse | 逆方向に再生されます |
| alternate | 正方向と逆方向を繰り返し再生します |
| alternate-reverse | 逆方向と正方向を繰り返し再生します |
animation-fill-mode
animation-fill-mode は、アニメーションの開始前、終了後のスタイルを指定できるプロパティです。
初期値は none です。
値は下記の４つあります。
| プロパティ名 | 説明 |
|---|---|
| none | アニメーションの開始前、終了後には適用されません |
| forwards | アニメーション終了時のスタイルがアニメーション終了後にも適用されます |
| backwards | アニメーション開始時のスタイルがアニメーション開始前にも適用されます |
| both | forward と backwards の両方が適用されます |
animation-play-state
animation-play-state は、アニメーションの再生・停止を指定できるプロパティです。
初期値は running です。
| プロパティ名 | 説明 |
|---|---|
| running | アニメーションが実行されます |
| paused | アニメーションが停止されます |
animation
これらのプロパティをまとめて書くことができます。記述する順番は、自由ですが、
各プロパティの値は半角スペースを空けて連続で記述します。
また、animation-duration と animation-delay の2つのプロパティは
両方とも同じ単位で指定するため、最初に記述したものが
animation-durationで、次に記述したものがanimation-delay となります。
まとめ
いかがでしたでしょうか！
私もまだ完璧に扱えませんが、たくさん練習してマスターすれば
デザインの幅が広がりそうですね♪
