CSS | @keyframesを使ったCSSアニメーションの基本的な使い方
CSSアニメーションで利用する@keyframes（キーフレーム）を使う方法と簡単なサンプルです。
See the Pen Flowing Text CSS Animation by yochans (@yochans) on CodePen.
@keyframesの基本的な書き方
@keyframes（キーフレーム）の基本的な書き方は要素にanimationをキーフレーム名を指定して、指定したキーフレーム名の@keyframesを記述します。
キーフレーム名、実行時間、イージングやループ設定をanimationプロパティにて個別または一括で指定可能です。
.target{
animation: animName 5s alternate infinite;
}
@keyframes animName {
/* アニメーション内容 */
}animationプロパティ
animationプロパティの指定方法
animation:はキーフレーム名（animation-name）、アニメーション時間（animation-duration）、アニメーション開始時間（animation-delay）、動きの種類・イージング （animation-timing-function）アニメーションの再生方向（animation-direction）、 繰り返し回数（animation-iteration-count）などを指定していきます。
@keyframesアニメーションを利用するには最低限、キーフレーム名とアニメーション時間（初期値が0のため）必要になります。
最低限の指定
.target {
animation: animName 5s;
}animationで指定可能なプロパティと値
| プロパティ | 指定可能な値 | 初期値 |
| animation-name | 任意の英数字 | なし |
| animation-duration | アニメーションにかける時間、秒で指定 | 0 |
| animation-timing-function | 動きの種類・イージング ease linear ease-in ease-out ease-in-out step-start step-end steps() cubic-bezier() | ease |
| animation-delay | アニメーション開始までの時間、秒で指定 | 0 |
| animation-iteration-count | 繰り返し回数、数値で指定またはinfinite（無限） | 1 |
| animation-direction | アニメーションの再生方向 normal（通常再生） reverse（逆再生） alternate（通常再生後、逆再生） alternate-reverse（通常再生後、逆再生） | normal |
| animation-play-state | 状態 running paused | running |
animationプロパティの記述する順番
秒という同じ値を持つアニメーション時間（animation-duration）とアニメーション開始時間（animation-delay）は、1つ目がアニメーション時間（animation-duration）2つ目がアニメーション開始時間（animation-delay）となります。
数値(s)による値がひとつのみの場合は、アニメーション時間（animation-duration）が定義され２つある場合はアニメーション時間（animation-duration）とアニメーション開始時間（animation-delay）が定義されます。
それ以外のプロパティ値の記述に決まった順序はなく、記述が前後しても正常に実行されます。
アニメーションキーフレーム名（animation-name）も先頭に記述する必要はありませんが、他のプロパティの値に使われる文字列は利用できません。
また、アニメーションキーフレーム名（animation-name）記述以降にinfiniteやnormalなど各プロパティで利用されない不明な値が記述されているとアニメーションは実行されません。
animationプロパティの個別指定
それぞれ個別に指定することも可能です。
animation-name: animName;
animation-duration: 5s;
animation-delay: 1s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: paused;@keyframes
@keyframesでanimationで指定してアニメーションキーフレーム名にアニメーション内容を作成します。
@keyframesでfrom、toを使ったサンプル
.target {
animation: animName 5s;
}
@keyframes animName {
from {
width: 0%;
}
to {
width: 100%;
}
}fromはアニメーション最初の値、toが最後の値になります。
最初の値がセレクタで定義されている場合、fromを省略できる場合もあります。
@keyframesでキーフレームを使ったサンプル
％を指定して、アニメーションのタイミングを細かく制御する事が可能です。
fromは0％、toは100％という感じです。
.target {
animation: animName 5s;
}
@keyframes animName {
0% {
width: 0%;
}
50% {
width: 30%;
}
100% {
width: 100%;
}
}上記の場合、50％の段階でのwidthが100％時の半分以下になっているので、アニメーションする速度に緩急がつきます。
もっとも単純な緩急であれば、animation-timing-functionを指定した方が良い場合も多いです。
See the Pen CSS keyframes 2 by yochans (@yochans) on CodePen.
@keyframesの要点
- 同じ値のキーが存在する場合、最後に宣言されたものが使用される
- javaScriptによるアクセスは可能
- %とfrom、toの混在は可能（0%と100％の代用なら）
- !importantは無視される
- 同じ@keyframesを複数のセレクタで指定できる
- 同じセレクタから複数の@keyframesも指定可能（別記事参照）