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

amp-keyframes属性を持つstyleタグの説明

Akira

福岡在住ウェブデザイナー。Web サイト制作に役立つ情報を「見やすさ」と「使いやすさ」にこだわり紹介しています。

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

1 つは <style amp-custom> タグ内に書く方法。

もう 1 つは、style 属性を使いインラインスタイルで書く方法。

しかし、2019 年 1 月末から、もう 1 つ CSS の指定方法が追加されました。

それが @keyframes<style amp-keyframes> タグ内に書く方法です。

この <style amp-keyframes> の解説です。

特徴

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

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

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

  • 設置場所は <body> タグの最後
  • @keyframes 専用
  • 50 キロバイトまでの 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);
    }
  }
}

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

@-webkit-keyframes animation {
  0% {
    opacity: .5;
  }
  
  100% {
    opacity: 0;
  }
}

CSS サイズ制限の対象外

AMP で許可されている CSS サイズは、50 キロバイトまでです。

わずかでも超えると AMP エラーが出ます。

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

例えば、<style amp-custom> に、40 キロバイトの CSS を書いたとします。

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

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

サイズ制限は実質なし

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

しかし、許可されている CSS サイズは、500 キロバイト。

ものすごい量の @keyframes を書けます。

全ての CSS を合計しても、500 キロバイトも書くのは無理。「とんでもないサイズを許可したな」というのが、私の感想です。

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

より速く

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

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

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

CSS のサイズが大きくなればなるほど、ブラウザの CSS 解析が遅くなります。

その結果、First Contentful Paint も遅くなります。

First Contentful Paint
ブラウザが、サイトのコンテンツ(テキストや画像など)を表示し始めるタイミング

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

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

可能な限り使う

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

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

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

ただ、アニメーションの重要性が増しているため、50 キロバイト制限を超えるほどの @keyframes を書く可能性があること。

そして、ほんのわずかであってもサイトを速くしようとする Google のエンジニアさんの頑張り。

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

尚、AMP 公式サイトでの説明は、下記のページで確認できます。

Keyframes stylesheet