メインコンテンツまで移動する

AMP の第 3 の CSS 指定方法 amp-keyframes

  • 公開日
  • 更新日

Akira Web デザイナー

特徴

AMP では、これまで 2 つの方法で CSS を指定できました。

1 つは <style amp-custom> タグ内に書く方法。もう 1 つは、style 属性を使いインラインスタイルで書く方法です。

参考：CSS が柔軟に！AMP が style 属性のインラインスタイルに対応

しかし、2019 年 1 月末から、もう 1 つ CSS の指定方法が追加されました。それが @keyframes を <style amp-keyframes> タグ内に書く方法です。

amp-keyframes 属性を持つ style タグ <style amp-keyframes> は、2 つの理由により実装されました。

  • より多くの CSS を書けるようにするため
  • サイト表示をより速くするため

この 2 つを実現するために、主に 5 つの特徴があります。

  • 設置場所は <body> タグの最後
  • @keyframes 専用
  • 75 キロバイトまでの CSS サイズ制限の対象外
  • @keyframes を 500 キロバイトまで書ける
  • First Contentful Paint の高速化

それぞれ解説します。

設置場所

<style amp-keyframes> は、<body> タグ内の最後に設置しなければなりません。

つまり、<style amp-keyframes> の次のタグは、必ず </body> 閉じタグです。

  <style amp-keyframes>
    ここに CSS を追加
  </style>
</body>

試しに、AMP 拡張コンポーネントのタグや SVG スプライトなどを <style amp-keyframes> と</body> の間に入れると、もれなく下記の AMP エラーが出ました。

Tag ‘style[amp-keyframes]’, if present, must be the last child of tag ‘body’.

翻訳：style「amp-keyframes」タグが存在する場合は、body タグの最後の子にする必要があります。

@keyframes 専用

<style amp-keyframes> は、CSS の @keyframes 専用です。

試しに、下記の CSS を追加すると…。

<style amp-keyframes>
  h1 {
    font-size: 24px;
  }
</style>

このような 2 つの AMP エラーが出ます。

CSS syntax error in tag ‘style[amp-keyframes]’ – qualified rule ‘h1’ must be located inside of a keyframe.

翻訳：style「amp-keyframes」タグの CSS 構文エラー – 「h1」は keyframe 内に配置する必要があります。

CSS syntax error in tag ‘style[amp-keyframes]’ – invalid property ‘font-size’. The only allowed properties are ‘[‘animation-timing-function’, ‘offset-distance’, ‘opacity’, ‘transform’, ‘visibility’]’.

翻訳：style「amp-keyframes」タグの CSS 構文エラー – 「font-size」は無効なプロパティ。 許可されているプロパティは「animation-timing-function」「offset-distance」「opacity」「transform」「visibility」です。

h1 を animation-name で使う @keyframes の名前と判断したようです。つまり、@keyframes しか書けません。

また、許可されているプロパティは、下記の 5 つのみです。

  • animation-timing-function
  • offset-distance
  • opacity
  • transform
  • visibility

ただ、念頭に置いておきたいのが、@keyframes に対する @media と @supports は許可されていること。

例えば、このようなメディアクエリの指定はできます。

@media screen and (max-width: 480px) {
  @keyframes animation {
    0% {
      transform: translateY(40px);
    }

    100% {
      transform: translateY(-40px);
    }
  }
}

使用ケースとして最も多く使われるメディア特性は、prefers-reduced-motion だと思います。

また、ベンダープレフィックスも使えます。

@-webkit-keyframes animation {
  0% {
    opacity: 0.5;
  }

  100% {
    opacity: 0;
  }
}

CSS サイズ制限の対象外

AMP で許可されている CSS サイズは、75 キロバイトまでです。わずかでも超えると AMP エラーが出ます。

しかし、<style amp-keyframes> に書いた CSS は、この 75 キロバイトまでの制限の対象外です。

例えば、<style amp-custom> に、60 キロバイトの CSS を書いたとします。そして、<style amp-keyframes> に、20 キロバイトの @keyframes を書いたとします。

合計 80 キロバイトの CSS を書いていますが、AMP エラーは出ません。60 キロバイトの CSS を書いていると判断されます。

サイズ制限は実質なし

<style amp-keyframes> にもサイズ制限があります。

しかし、許可されている CSS サイズは、500 キロバイト。ものすごい量の @keyframes を書けます。

サイトで適用する全ての CSS を合計しても、500 キロバイトにもならないでしょう。「とんでもないサイズを許可したな」というのが、私の感想です。

一応サイズ制限はあるものの、制限を気にせずいくらでも @keyframes を書けます。

FCP の改善

最近の Web サイトでは、多くのアニメーションを使います。その分、CSS のサイズは大きくなりがちです。

また、アニメーションにこだわればこだわるほど、より細かく @keyframes を指定します。当然、CSS のサイズは大きくなります。

しかも、古いブラウザへの対応のためにベンダープレフィックスまで書くと、さらに CSS のサイズが増えます。

CSS のサイズが大きくなればなるほど、ブラウザの CSS 解析が遅くなります。その結果、First Contentful Paint（FCP） も遅くなります。

しかし、<body> の最後に @keyframes を書くことで、少なくとも @keyframes がレンダリングをブロックしなくなります。

<style amp-keyframes> を使えば、アニメーションを多用していても First Contentful Paint が遅くなりません。

可能な限り使う

<style amp-keyframes> が実装されましたが、@keyframes はこれまで通り <style amp-custom> にも書けます。

CSS のサイズ制限に悩んでいなければ、どちらに書いてもいいと思います。

<style amp-custom> に @keyframes を書いたからといって、体感で分かるほど First Contentful Paint が遅くなるとは思えません。

ただ、アニメーションの重要性が増しているため、75 キロバイトの制限を超えるほど @keyframes を書く可能性があること。そして、ほんのわずかであってもサイトを速くできること。

この 2 点を考えれば、可能な限り @keyframes は <style amp-keyframes> に書くのがいいかなと思います。

尚、AMP 公式サイトでの説明は、Keyframes stylesheet にてご覧いただけます。

フォローする