CSS/@keyframes

@keyframes

@keyframesルールは、CSSアニメーションのキーとなるフレームを定義するために使用されます。このルールを使用することで、アニメーションの進行に沿って、要素のスタイルを段階的に変化させることができます。

概要

@keyframesを使うことで、アニメーションのタイムラインに沿った一連のスタイル変更を指定することができます。これにより、要素のアニメーションが滑らかに進行し、視覚的に面白い動きを作成することができます。

記述場所: @keyframesはCSS内でグローバルに定義する必要があります。定義されたアニメーションは、任意の要素に適用することができます。

書式

@keyframesルールの基本構文は以下の通りです：

@keyframes <アニメーション名> {
  <開始時のキーフレーム> {
    <プロパティ>: <値>;
  }
  <途中のキーフレーム> {
    <プロパティ>: <値>;
  }
  <終了時のキーフレーム> {
    <プロパティ>: <値>;
  }
}

<アニメーション名>: アニメーションの識別子となる名前を指定します。
<プロパティ>: 変更したいCSSプロパティを指定します（例: transform, opacity, background-colorなど）。
<値>: プロパティの値を指定します。

使用例

以下に@keyframesの使用例を示します。

アニメーションの基本例

@keyframes example {
  0% {
    background-color: red;
    left: 0;
  }
  50% {
    background-color: blue;
    left: 50%;
  }
  100% {
    background-color: green;
    left: 100%;
  }
}

.element {
  position: relative;
  width: 100px;
  height: 100px;
  animation: example 5s infinite;
}

この例では、@keyframesでアニメーション名exampleを定義し、要素の背景色と位置が時間の経過とともに変化します。アニメーションは5秒間で繰り返し再生されます。

アニメーションのタイミング関数を使用する例

@keyframes move {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100px);
  }
}

.element {
  animation: move 2s ease-in-out;
}

この例では、要素がtranslateXプロパティを使って横に移動し、ease-in-outというタイミング関数を使用して滑らかな動きを作り出します。

アニメーションのタイミング関数

アニメーションの速度や進行を制御するために、次のタイミング関数を使用することができます：

linear: 一定の速度で進行します。
ease: 最初は遅く、途中で速く、最後は遅くなります（デフォルト）。
ease-in: 最初は遅く、最後は速く進行します。
ease-out: 最初は速く、最後は遅く進行します。
ease-in-out: 最初と最後が遅く、中間が速く進行します。

アニメーションの繰り返し

アニメーションを繰り返すためには、animation-iteration-countプロパティを使用します。infiniteを指定することで無限に繰り返すことができます。

.element {
  animation: example 5s infinite;
}

infinite: アニメーションを無限に繰り返します。
<回数>: アニメーションを指定した回数だけ繰り返します。

アニメーションの遅延

アニメーションの開始を遅らせるには、animation-delayプロパティを使用します。

.element {
  animation: example 5s 2s;
}

この例では、アニメーションは2秒の遅延後に開始します。