Google は AI 技術を使用して、コンテンツをご希望の言語に翻訳しています。AI 翻訳には誤りが含まれる場合があります。

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

Rachel Andrew Technical Writer

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

これらの推奨事項の背景にある理論については、一部のアニメーションが遅い理由をご覧ください。また、実践的なヒントについては、アニメーションガイドをご覧ください。

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

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

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

アニメーションを実行した状態で、Chrome DevTools の [Performance] タブを開き、アニメーションを数秒間記録します。[Summary] で、このアニメーションの実行時にブラウザがレイアウトやペイントのオペレーションを行っていないことを確認できます。

DevTools の概要 — ウィザードアニメーションのプロファイリング後の概要。

レイアウトとペイントを発生させずにこのアニメーションを実現する方法を確認するには、Chrome DevTools で移動する要素を検査します。[Animations] パネルを使用すると、さまざまなアニメーション要素を見つけることができます。要素をクリックすると、DOM でハイライト表示されます。

アニメーションのさまざまな部分が表示されている [Animations] パネル。 — Chrome DevTools の [Animation] パネルでアイテムを表示して選択する。

たとえば、三角形を選択すると、要素のボックスが空中に移動し、回転して、開始位置に戻るまでの間にどのように変形するかを確認できます。

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 で、[Style] パネルを下にスクロールすると、キーフレームが表示されます。このアニメーションは、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 で Pulsating Circle を表示

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

Firefox DevTools でアニメーションを検証する

アニメーションを実行した状態で、Firefox DevTools の [Performance] タブを開き、アニメーションを数秒間記録します。記録を停止します。ウォーターフォールに [Recalculate Style] のエントリがないことがわかります。このアニメーションではスタイルの再計算が発生しないため、レイアウトとペイントのオペレーションも発生しないことがわかりました。

Firefox Waterfall でのアニメーションの詳細 — 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: scale と opacity をアニメーション化します。

.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] パネルを選択することです。使用されているアニメーションと、アニメーション化されているプロパティが可視化されます。

::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 で Pure CSS 3D Sphere を表示

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

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

平面が回転しているように見えます。

これらの平面とスポークはラッパー <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 要素内にネストされています。アニメーションを使用して、変換によりドットの拡大縮小と移動を行います。これにより、パルス効果が作成されます。

ドットが球体とともに回転し、点滅します。

.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 を開き、実行中にパフォーマンスを記録します。最初の読み込み後、アニメーションはレイアウトやペイントをトリガーせず、スムーズに実行されます。

まとめ

これらの例から、パフォーマンスの高いメソッドを使用して少数のプロパティをアニメーション化することで、非常に優れたアニメーションを作成できることがわかります。アニメーションガイドで説明されているパフォーマンスの高い方法をデフォルトで使用することで、ページの速度低下を心配することなく、目的の効果を作成することに時間を費やすことができます。