高性能 CSS アニメーションの例

この投稿では、CodePen で人気のあるアニメーションがどのように作成されたかについて説明します。 これらのアニメーションはすべて、このセクションの他の記事で説明するパフォーマンスの高い手法を使用しています。

背後にある理論については、一部のアニメーションが遅い理由をご覧ください。 アニメーション ガイドで実践的なヒントをご覧ください。

ウィザード読み込みアニメーション

CodePen での表示ウィザードの読み込みアニメーション

この読み込みアニメーションは、すべて CSS を使用して作成されています。 画像とすべてのアニメーションは CSS と HTML で作成されており、 画像や JavaScript はありません。 Chrome DevTools を使用すると、作成方法やパフォーマンスを把握できます。

Chrome DevTools でアニメーションを検査する

アニメーションが動作している状態で、Chrome DevTools の [パフォーマンス] タブを開き、アニメーションを数秒記録します。 [Summary] で、このアニメーションの実行中にブラウザがレイアウト オペレーションやペイント オペレーションを実行していないことがわかります。

<ph type="x-smartling-placeholder">
</ph> DevTools のサマリー <ph type="x-smartling-placeholder">
</ph> ウィザード アニメーションのプロファイリング後の概要

レイアウトやペイントを発生させずにこのアニメーションがどのように実現されたかを調べるには、 Chrome DevTools で移動する要素を調べます。 [アニメーション] パネルを使用して、さまざまなアニメーション要素を配置できます。 要素をクリックすると、その要素が DOM でハイライト表示されます。

<ph type="x-smartling-placeholder">
</ph> アニメーションのさまざまな部分を表示する [Animations] パネル <ph type="x-smartling-placeholder">
</ph> Chrome DevTools のアニメーション パネルでアイテムを表示して選択する。

たとえば、三角形を選択して、 元素の箱が空気に入り込む過程で 回転し、開始位置に戻ります。

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
</ph> Chrome DevTools で三角形のパスを追跡する方法を紹介する動画。

要素が選択された状態で [スタイル] パネルを確認します。 ここには三角形の形状を描画する CSS があります。 使用されるアニメーションです。

仕組み

三角形は、::after 疑似要素を使用して生成されたコンテンツを追加し、 枠線を使ってシェイプを作成します。

.triangle {
    position: absolute;
    bottom: -62px;
    left: -10px;
    width: 110px;
    height: 110px;
    border-radius: 50%;
}

.triangle::after {
    content: "";
    position: absolute;
    top: 0;
    right: -10px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 28px 48px 28px;
    border-color: transparent transparent #89beb3 transparent;
}

このアニメーションは、次の CSS 行で追加されます。

animation: path_triangle 10s ease-in-out infinite;

Chrome DevTools で、スタイルパネルを下にスクロールするとキーフレームを見つけることができます。 ご覧のとおり、transform を使用して要素の位置を変更したり回転させたりすることで、アニメーションが作成されていることがわかります。 transform プロパティは、アニメーション ガイドで説明されているプロパティの 1 つです。 これにより、ブラウザでレイアウト オペレーションやペイント オペレーションが実行されない(アニメーションが遅くなる主な原因となっています)。

@keyframes path_triangle {
  0% {
    transform: translateY(0);
  }
  10% {
    transform: translateY(-172px) translatex(10px) rotate(-10deg);
  }
  55% {
    transform: translateY(-172px) translatex(10px) rotate(-365deg);
  }
  58% {
    transform: translateY(-172px) translatex(10px) rotate(-365deg);
  }
  63% {
    transform: rotate(-360deg);
  }
}

このアニメーションの異なる可動部分はそれぞれ同様の手法を使用しています。 その結果、滑らかに動作する複雑なアニメーションが完成します。

点滅する円

CodePen で点滅する円を表示する

このようなアニメーションは、ページ上の何かに注意を引くために使用されることがあります。 このアニメーションを理解するには、Firefox DevTools を使用します。

Firefox DevTools でアニメーションを調べる

アニメーションが動作している状態で、Firefox DevTools の [Performance] タブを開き、アニメーションを数秒記録します。 録画を停止し、 ウォーターフォールに [スタイルを再計算] のエントリが表示されていないはずです。 このアニメーションではスタイルが再計算されず レイアウトとペイントの操作です

<ph type="x-smartling-placeholder">
</ph> Firefox のウォーターフォールに表示されるアニメーションの詳細 <ph type="x-smartling-placeholder">
</ph> Firefox DevTools ウォーターフォール。

Firefox DevTools を開いたまま、円を調べて、このアニメーションの動作を確認します。 クラスが pulsating-circle<div> は円の位置をマークします。 ただし、円自体は描画されません。

.pulsating-circle {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 30px;
    height: 30px;
}

円とアニメーションを表示するには、::before 疑似要素と ::after 疑似要素を使用します。

::before 要素は、白い円の外側に広がる不透明なリングを作成します。 pulse-ring というアニメーションを使用します。 これにより transform: scaleopacity がアニメーション化されます。

.pulsating-circle::before {
    content: '';
    position: relative;
    display: block;
    width: 300%;
    height: 300%;
    box-sizing: border-box;
    margin-left: -100%;
    margin-top: -100%;
    border-radius: 45px;
    background-color: #01a4e9;
    animation: pulse-ring 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}

@keyframes pulse-ring {
  0% {
    transform: scale(0.33);
  }
  80%, 100% {
    opacity: 0;
  }
}

アニメーション化されているプロパティを確認するもう 1 つの方法は、Firefox DevTools の [Animations] パネルを選択することです。 使用されているアニメーションが可視化されます。 アニメーション化されているプロパティです

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
</ph> ::before 疑似要素を選択すると、アニメーション化されているプロパティを確認できます。

白い円自体は、::after 疑似要素を使用して作成され、アニメーション化されています。 アニメーション pulse-dot は、transform: scale を使用してアニメーション中にドットを拡大または縮小します。

.pulsating-circle::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-color: white;
  border-radius: 15px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
  animation: pulse-dot 1.25s cubic-bezier(0.455, 0.03, 0.515, 0.955) -0.4s infinite;
}

@keyframes pulse-dot {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.8);
  }
}

このようなアニメーションは、アプリのさまざまな場所で使用できます。 こうした小さな変更がアプリの全体的なパフォーマンスに影響を与えないようにすることが重要です。

純粋な CSS 3D 球体

CodePen で純粋な CSS 3D 球を表示する

このアニメーションは非常に複雑に思えますが ただし、前の例ですでに見てきた手法が使用されています。 多数の要素をアニメーション化することで複雑さが増します。

Chrome DevTools を開き、クラスが plane の要素のいずれかを選択します。 球体は、回転する平面とスポークで構成されている。

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
</ph> 飛行機が回転しているようだ。
で確認できます。

これらのプレーンとスポークは、ラッパー <div> 内にあります。 transform: rotate3d を使用して回転しているのはこの要素です。

.sphere-wrapper {
  transform-style: preserve-3d;
  width: 300px;
  height: 300px;
  position: relative;
  animation: rotate3d 10s linear infinite;
}

@keyframes rotate3d {
  0% {
    transform: rotate3d(1, 1, 1, 0deg);
  }
  25% {
    transform: rotate3d(1, 1, 1, 90deg);
  }
  50% {
    transform: rotate3d(1, 1, 1, 180deg);
  }
  75% {
    transform: rotate3d(1, 1, 1, 270deg);
  }
  100% {
    transform: rotate3d(1, 1, 1, 360deg);
  }
}

ドットは plane 要素と spoke 要素内にネストされています。 変形を使って拡大縮小と平行移動を行うアニメーションを使用します。 これにより、点滅効果が得られます。

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
</ph> ドットが球体とともに回転し、点滅します。
.spoke-15 .dot,
.spoke-21 .dot {
  animation: pulsate 0.5s infinite 0.83333333s alternate both;
  background-color: #55ffee;
}

@-webkit-keyframes pulsate {
  0% {
    transform: rotateX(90deg) scale(0.3) translateZ(20px);
  }
  100% {
    transform: rotateX(90deg) scale(1) translateZ(0px);
  }
}

このアニメーションの作成には タイミングを適切に調整することと 回転と点滅効果が生まれます。 アニメーション自体はごく単純で パフォーマンスの非常に高い方法を使います

Chrome DevTools を開いて、実行中にパフォーマンスを記録することで、このアニメーションのパフォーマンスを確認できます。 初期読み込みの後、アニメーションでレイアウトまたはペイントがトリガーされない。 スムーズに動作します。

まとめ

以下の例から、パフォーマンスの高いメソッドを使用していくつかのプロパティをアニメーション化することで、魅力的なアニメーションを作成できることがわかります。 デフォルトでは、アニメーション ガイドで説明されているパフォーマンスの高いメソッドが使用されます。 ページの動作が遅くなることを心配せずに、思いどおりの効果を生み出すことに時間を費やすことができます。