Wikibooks

CSS/animation

< CSS

animationプロパティ

編集

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

基本構文

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

"https://ja.wikibooks.org/w/index.php?title=CSS/animation&oldid=267286" より作成