CSS/animation

animationプロパティ

animationプロパティは、要素にアニメーション効果を適用するために使用されます。これを使うことで、アニメーションの挙動を簡単に指定できます。animationプロパティは複数のショートハンド（省略形）を提供しており、アニメーションの継続時間、タイミング、方向、名前、遅延などのさまざまな設定を一度に指定できます。

基本構文

animation: <animation-duration> <animation-timing-function> <animation-delay> <animation-iteration-count> <animation-direction> <animation-fill-mode> <animation-play-state> <animation-name>;

各値は次の通りです：

• animation-duration：アニメーションの継続時間を指定します。
• animation-timing-function：アニメーションの進行具合（タイミング）を指定します。
• animation-delay：アニメーション開始までの遅延時間を指定します。
• animation-iteration-count：アニメーションの繰り返し回数を指定します。
• animation-direction：アニメーションの方向を指定します。
• animation-fill-mode：アニメーション前後の状態を指定します。
• animation-play-state：アニメーションの再生状態を指定します。
• animation-name：アニメーションの名前を指定します。

例

/* アニメーションのすべての設定を1行で指定 */
div {
    animation: 3s ease-in 1s infinite reverse both running slidein;
}

この例では、div要素に次のアニメーションが適用されます：

• 継続時間：3秒（animation-duration: 3s）
• タイミング関数：ease-in（animation-timing-function: ease-in）
• 開始遅延：1秒（animation-delay: 1s）
• 繰り返し回数：無限（animation-iteration-count: infinite）
• 方向：逆方向（animation-direction: reverse）
• 適用範囲：アニメーションが終了した後の状態も適用（animation-fill-mode: both）
• 再生状態：アニメーションが再生中（animation-play-state: running）
• アニメーションの名前：slidein（animation-name: slidein）

各プロパティの詳細

animation-delay

animation-delayプロパティは、アニメーション開始までの遅延時間を指定します。指定した時間が経過した後にアニメーションが開始されます。

/* アニメーション開始前に2秒の遅延を設定 */
div {
    animation-delay: 2s;
}

animation-direction

animation-directionプロパティは、アニメーションの方向を指定します。主に以下の値を使用します：

• normal：通常の方向でアニメーションを再生します（デフォルト）。
• reverse：逆方向でアニメーションを再生します。
• alternate：交互にアニメーションが再生されます（1回目は通常、2回目は逆方向）。
• alternate-reverse：逆方向で交互に再生されます（1回目は逆方向、2回目は通常）。

/* アニメーションを交互に再生 */
div {
    animation-direction: alternate;
}

animation-duration

animation-durationプロパティは、アニメーションの継続時間を指定します。例えば、3秒間アニメーションを再生したい場合は次のように指定します。

/* アニメーションの継続時間を3秒に設定 */
div {
    animation-duration: 3s;
}

animation-fill-mode

animation-fill-modeプロパティは、アニメーション前後の状態を指定します。主に以下の値を使用します：

• none：アニメーションが終了した後、スタイルは変更されません（デフォルト）。
• forwards：アニメーション終了後、最後のキーフレームのスタイルを保持します。
• backwards：アニメーション開始前に設定した最初のキーフレームのスタイルを保持します。
• both：アニメーション終了後、最後のキーフレームのスタイルを保持し、開始前には最初のキーフレームのスタイルを保持します。

/* アニメーション終了後に最後のスタイルを保持 */
div {
    animation-fill-mode: forwards;
}

animation-iteration-count

animation-iteration-countプロパティは、アニメーションの繰り返し回数を指定します。infiniteを指定すると、アニメーションは無限に繰り返されます。

/* アニメーションを無限に繰り返す */
div {
    animation-iteration-count: infinite;
}

animation-name

animation-nameプロパティは、適用するアニメーションの名前を指定します。アニメーションの定義は@keyframesルールを使用して行います。

/* アニメーションの名前を指定 */
div {
    animation-name: slidein;
}

@keyframesで定義されたアニメーション名と一致する必要があります。

/* アニメーションの定義 */
@keyframes slidein {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}

animation-play-state

animation-play-stateプロパティは、アニメーションの再生状態を指定します。主に以下の値を使用します：

• running：アニメーションが再生中です（デフォルト）。
• paused：アニメーションが一時停止しています。

/* アニメーションを一時停止 */
div {
    animation-play-state: paused;
}

animation-timing-function

animation-timing-functionプロパティは、アニメーションの進行具合（タイミング）を指定します。主に以下の値を使用します：

• linear：一定の速さでアニメーションが進行します。
• ease：標準の加速と減速のタイミング関数です。
• ease-in：開始時に加速するタイミング関数です。
• ease-out：終了時に減速するタイミング関数です。
• ease-in-out：開始時と終了時に加速と減速が行われるタイミング関数です。
• cubic-bezier(n,n,n,n)：カスタムのベジェ曲線を使用して進行具合を指定できます。

/* アニメーションの進行具合をease-in-outに設定 */
div {
    animation-timing-function: ease-in-out;
}

まとめ

animationプロパティを使うことで、要素にアニメーションを簡単に適用できます。個別のアニメーション設定を細かく指定することも可能で、これによりアニメーションの動きやタイミングを自由に調整できます。アニメーションを使用することで、ウェブページに動的な効果を加え、視覚的に魅力的なコンテンツを作成することができます。