CSSで簡単にアニメーションをつけられる手段の一つにtrnasitionがあります。
keyframesとanimationは、詳細な指定ができるため高度な動きが実現できます。サイトを閲覧している中で「面白い」アニメーションだと感じる動きは、大体keyframesとanimationが使われています。
魅力的なサイトを制作するためや自身のレベルアップのためにも、しっかりと身につけていきましょう！
もくじ
animationとkeyframesの関係性
高度な動きをつけるためには、animationとkeyframesを使います。
animationは、transitionのように「アニメーションの時間」や「開始するまでの時間」などを指定できることに加えて、さらに詳細な指定ができます。
そして、animationで実際にどのような「動き」を実現させたいかを指定します。
言葉での説明だとわかりずらいかと思いますので、実際のコードを見てみましょう。
コード例
<div class="animation-class"></div>.animation-class {
width: 50px;
height: 50px;
transform: ratate(0);
animation-name: animation-rotate; //アニメーションの名前を指定
animation-duration: 8s; //アニメーション時間が8秒
animation-timing-function: linear; //アニメーションは一定の動き
animation-delay: 1s; //アニメーション開始を1秒遅らせます
animation-iteration-count: infinite; //アニメーションを無限に繰り返します
animation-play-state: running; //アニメーションを再生します
}
.animation-class:hover {
animation-play-state: paused; //ホバーされたらアニメーションを停止します
}
@keyframes animation-rotate {
0% {
transform: rotate(0); //0~2秒間の間に90度回転します
//0~2秒間の間に背景色を赤色に変化します
}
25% {
width: rotate(90deg) //2~4秒間の間に90度地点から180度回転します
background-color: red; //2~4秒間の間に背景色を黄色に変化します
}
50%{
transform: rotate(180deg); //4~6秒間の間に180度地点から270度回転します
background-color: yellow; //4~6秒間の間に背景色を青色に変化します
}
75%{
transform: rotate(270deg); //6~8秒間の間に270度地点から360度回転します
background-color: blue; //6~8秒間の間に黒色に変化します
}
100%{
transform: rotate(360deg);
background-color: #000;
}
}animationの指定
animationは、transitionよりも指定できるプロパティが多いです。そのため、細かなアニメーションの動きを実現できます。
| プロパティ | 説明 | 初期値 |
|---|---|---|
| animation-name | アニメーションの名前 | none |
| animation-duration | アニメーションが開始してから終了するまでの時間 | 0s |
| animation-timing-function | アニメーションのイージング（加速度） | ease |
| animation-delay | アニメーションが開始するまでの時間 | 0s |
| animation-iteration-count | アニメーションを繰り返す回数 | 1 |
| animation-direction | アニメーションの再生方向（順番・逆再生） | normal |
| animation-fill-mode | アニメーション開始と終了時のスタイル状態 | none |
| animation-play-state | アニメーションの再生・停止 | running |
| animation | 上記のプロパティを一括指定できる |
animation-name
名前をつけ、@keyframsで指定することでアニメーションを実現できます。
animation-duration
アニメーションが開始されてから完了するまでの時間を指定します。所要時間を秒数またはミリ秒数で指定します
animation-timing-function
アニメーションが変化する速度を指定します。
| 値 | 説明 |
|---|---|
| ease | アニメーションの開始・終了付近の動きがゆっくり変化 |
| linear | 一定の速度で変化します |
| ease-in | アニメーション開始時はゆっくり変化し、徐々に速く変化 |
| ease-out | アニメーション開始時は速く変化し、徐々にゆっくり変化 |
| ease-in-out | アニメーションの開始・終了付近の動きがゆっくり変化（easeよりゆっくり変化） |
| step-start | アニメーションの開始時点で終了状態へ一気に変化 |
| step-end | アニメーションの開始時点では変化せず、終了時に一気にアニメーションが完了した状態になります |
| steps | 関数型の値。アニメーションが進行する時間と度合いをステップ数と変化のタイミング（各ステップの起点にしたい場合はstart、終点にしたい場合はendを指定します。）として指定。例えば、アニメーションの変化を２段階で各ステップの終了時に発生させるには、steps（2,end）と指定 |
| cubic-bezier() | 関数型の値。アニメーションが進行する時間をX軸、変化の度合いをY軸とした三次ベジェ曲線の軌跡によって、アニメーションの進行度を指定 |
animation-delay
アニメーションが開始するまでの時間を指定します。
animation-iteration-count
アニメーションを実行する回数を指定します。初期値では、アニメーションは1回のサイクルが終了すると停止するように設定されていますが、このプロパティで再生する回数を指定できます。
停止させずに無限にループさせる場合は、infiniteを指定します。
animation-direction
アニメーションのサイクルごとの再生方向を指定します。逆方向に再生した場合は、animation-timing-functionの値も逆の動きになります。
| 値 | 説明 |
|---|---|
| normal | アニメーションを順方向に再生 |
| reverse | アニメーションを逆方向に再生 |
| alternate | アニメーションを最初に順方向で再生し、終了すると逆方向に再生 |
| alternate-reverse | アニメーションを最初に逆方向で再生し、終了すると順方向に再生 |
animation-fill-mode
アニメーション再生中・再生後のスタイルを指定します。
| 値 | 説明 |
|---|---|
| none | アニメーション再生後は、元のスタイルが適用 |
| backwards | アニメーション再生後は、最初のキーフレーム（0%）のスタイルが適用 |
| forwards | アニメーション再生後は、最後のキーフレーム（100%）のスタイルが適用 |
| both | アニメーション再生後は、最後のキーフレーム（100%）のスタイルが適用 |
animation-play-state
アニメーションの再生・停止を指定します。
| 値 | 説明 |
|---|---|
| running | アニメーションを再生 |
| paused | アニメーションを停止 |
animation
上記のプロパティを一括で指定します。順番は上記の通りに記述することをおすすめします。
秒数を指定するものがanimation-durationとanimation-delayの２つがありますので、どちらも指定した場合はanimation-duration → animation-delayの順番で適用されます。
.animation-class{
animation: name 2s infinite;
}keyframesの指定
animation-nameを指定し、どのタイミングでどのような変化をさせたいかを設定します。
.animation-class {
width: 50px;
height: 50px;
transform: ratate(0);
animation-name: animation-width;
animation-duration: 6s;
}
@keyframes animation-width {
0% {
width: 50px;
}
25%{
width: 100px;
}
50%{
width: 75px;
}
100%{
width: 100px;
}
}上記では、animation-durationを6秒に指定しているので、最初の2秒間で幅を100pxに変化、次の2秒間で幅を75pxに変化、最後の2秒間で幅を100pxに変化します。