CSSで要素をアニメーションさせる：トランジションとアニメーションの違い

2024-04-10

CSS アニメーションで複数の CSS トランジションを要素に適用する方法

方法 1: @keyframes ルールを使用する

この方法は、複数のアニメーションプロパティを単一の @keyframes ルールにまとめて、そのルールを要素に適用する方法です。

@keyframes my-animation {
  0% {
    opacity: 0;
    transform: translateX(-100px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

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

この方法の利点は、コードが簡潔で分かりやすいことです。欠点は、すべてのトランジションが同時に開始され、個別に制御できないことです。

方法 2: animation-delay プロパティを使用する

この方法は、個々のトランジションを順番に開始するために animation-delay プロパティを使用する方法です。

.my-element {
  opacity: 0;
  transform: translateX(-100px);
  transition: opacity 1s ease-in-out, transform 1s ease-in-out;
}

.my-element:hover {
  opacity: 1;
  transform: translateX(0);
}

@media (hover: none) {
  .my-element {
    animation-delay: 1s;
  }
}

この方法の利点は、個々のトランジションを個別に制御できることです。欠点は、コードが冗長になる可能性があることです。

この方法は、JavaScriptを使用して個々のトランジションを制御する方法です。

<div class="my-element"></div>

const element = document.querySelector('.my-element');

element.addEventListener('mouseenter', () => {
  element.style.opacity = 1;
  element.style.transform = 'translateX(0)';
});

element.addEventListener('mouseleave', () => {
  element.style.opacity = 0;
  element.style.transform = 'translateX(-100px)';
});

この方法の利点は、最も柔軟な方法であることです。欠点は、JavaScript の知識が必要であることです。

コードの簡潔さを求める場合は、方法 1 を選択します。
個々のトランジションを個別に制御したい場合は、方法 2 または 3 を選択します。
JavaScript に精通している場合は、方法 3 を選択します。

<div class="my-element">
  <h1>Hello, world!</h1>
</div>

@keyframes my-animation {
  0% {
    opacity: 0;
    transform: translateX(-100px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

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

<div class="my-element">
  <h1>Hello, world!</h1>
</div>

.my-element {
  opacity: 0;
  transform: translateX(-100px);
  transition: opacity 1s ease-in-out, transform 1s ease-in-out;
}

.my-element:hover {
  opacity: 1;
  transform: translateX(0);
}

@media (hover: none) {
  .my-element {
    animation-delay: 1s;
  }
}

方法 3: JavaScriptを使用する

<div class="my-element">
  <h1>Hello, world!</h1>
</div>

const element = document.querySelector('.my-element');

element.addEventListener('mouseenter', () => {
  element.style.opacity = 1;
  element.style.transform = 'translateX(0)';
});

element.addEventListener('mouseleave', () => {
  element.style.opacity = 0;
  element.style.transform = 'translateX(-100px)';
});

実行方法

上記のコードを HTML ファイルと CSS ファイルに保存し、ブラウザで開きます。

方法 1 の場合は、要素が 2 秒かけてフェードインし、右から左に移動します。

方法 3 の場合は、要素にカーソルを合わせると、フェードインし、右から左に移動します。カーソルを要素から離すと、要素はフェードアウトし、元の位置に戻ります。

上記のサンプルコードは基本的な例です。さまざまなプロパティや値を使用して、さまざまなアニメーションを作成できます。

詳細については、以下のリソースを参照してください。

CSS アニメーションで複数の CSS トランジションを要素に適用するその他の方法

animation-timing-function プロパティを使用して、個々のトランジションのタイミングを制御できます。

.my-element {
  opacity: 0;
  transform: translateX(-100px);
  transition: opacity 1s ease-in, transform 1s linear;
}

.my-element:hover {
  opacity: 1;
  transform: translateX(0);
}

この例では、opacity プロパティのトランジションは ease-in タイミング関数を使用して開始され、transform プロパティのトランジションは linear タイミング関数を使用して開始されます。

.my-element {
  opacity: 0;
  transform: translateX(-100px);
  transition: opacity 1s ease-in, transform 2s linear;
}

.my-element:hover {
  opacity: 1;
  transform: translateX(0);
}

この例では、opacity プロパティのトランジションは 1 秒間続き、transform プロパティのトランジションは 2 秒間続きます。

.my-element {
  opacity: 0;
  transform: translateX(-100px);
  transition: opacity 1s ease-in 2, transform 1s linear 3;
}

.my-element:hover {
  opacity: 1;
  transform: translateX(0);
}

animation-fill-mode プロパティを使用して、アニメーションが完了した後、要素がどのように表示されるかを制御できます。

.my-element {
  opacity: 0;
  transform: translateX(-100px);
  transition: opacity 1s ease-in, transform 1s linear;
  animation-fill-mode: forwards;
}

.my-element:hover {
  opacity: 1;
  transform: translateX(0);
}