Webアニメーション：CSSトランジションと@keyframesルールの比較

2024-04-02

CSSトランジションの省略記法：複数のプロパティをまとめて設定

CSSトランジションは、要素の状態変化に伴うアニメーションを簡単に作成できる機能です。通常、各プロパティに対して個別にトランジションを設定する必要があります。しかし、複数のプロパティを同時に変化させたい場合、省略記法を使うことでコードを簡潔に記述できます。

省略記法の書式

transition: <property1> <duration1> <timing-function1> [comma-separated list of properties and values];

例

/* 要素の背景色と位置を同時に変化させる */
.element {
  transition: background-color 2s ease, left 1s linear;
}

この例では、background-color プロパティは2秒間かけてイーズイン・イーズアウトのタイミング関数で変化し、left プロパティは1秒間かけてリニアなタイミング関数で変化します。

コード量が減り、読みやすくなる
プロパティ間のタイミング関数を統一できる

注意点

プロパティの順番は重要です。最初のプロパティが最初のタイミング関数に関連付けられ、2番目のプロパティが2番目のタイミング関数に関連付けられます。
ベンダープレフィックスが必要な場合、すべてのプロパティに付与する必要があります。

all キーワードを使って、すべてのプロパティにトランジションを設定できます。
個別プロパティの省略記法も存在します。詳細は上記参考資料を参照してください。

関連用語

CSS
WebKit
CSSトランジション
アニメーション
省略記法

補足

上記は基本的な解説であり、詳細については参考資料を参照してください。
コード例は動作確認のための実行環境が必要です。

HTML

<div class="element">
  <h1>要素</h1>
</div>

.element {
  width: 200px;
  height: 200px;
  background-color: red;
  margin: 10px;
  transition: background-color 2s ease, left 1s linear;
}

.element:hover {
  background-color: blue;
  left: 50px;
}

動作

上記のコードを実行すると、element クラスの要素は、マウスオーバー時に2秒間かけて背景色が赤から青に変化し、1秒間かけて左に50px移動します。

解説

.element セレクタは、element クラスの要素にスタイルを適用します。
transition プロパティは、要素の状態変化に伴うアニメーションを設定します。
background-color プロパティは、要素の背景色を設定します。
left プロパティは、要素の左端の位置を設定します。
ease キーワードは、イーズイン・イーズアウトのタイミング関数を指定します。
linear キーワードは、リニアなタイミング関数を指定します。
:hover 擬似クラスは、要素にマウスがカーソルオーバーした時に適用されます。

上記は基本的なサンプルコードであり、さまざまなバリエーションが考えられます。

CSSトランジションの省略記法以外の方法

個別にトランジションを設定する

.element {
  background-color: red;
  margin: 10px;
  transition-property: background-color, left;
  transition-duration: 2s, 1s;
  transition-timing-function: ease, linear;
}

.element:hover {
  background-color: blue;
  left: 50px;
}

この方法は、省略記法よりも冗長になりますが、各プロパティのトランジション設定を個別に制御できます。

@keyframes ルールを使う

@keyframes my-animation {
  from {
    background-color: red;
    left: 0;
  }
  to {
    background-color: blue;
    left: 50px;
  }
}

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

.element:hover {
  animation-play-state: running;
}

この方法は、複雑なアニメーションを作成する場合に便利です。

JavaScriptを使う

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

element.addEventListener('mouseenter', () => {
  element.style.backgroundColor = 'blue';
  element.style.left = '50px';
});

element.addEventListener('mouseleave', () => {
  element.style.backgroundColor = 'red';
  element.style.left = '0';
});

この方法は、最も柔軟性がありますが、JavaScriptの知識が必要です。