CSS アニメーションとトランジションのトリガ

CSS アニメーションは、ウェブ要素をある CSS スタイル構成から別の構成にトランジションすることができます。ブラウザは、定義済みのアニメーションを読み込み時に開始できますが、イベントでトリガされる CSS アニメーションは、クラスの追加と削除によって行われます。AMP では、これら両方の種類のアニメーションをサポートしています。

正確にタイミングを合わせる必要のない、小さめの完結型アニメーションの場合は、CSS を使用してください。

CSS とキーフレームの定義

AMP では、次の方法で CSS を定義できます。

ドキュメントの head 内にある <style amp-custom> タグに定義。75,000 バイトの制限。
インラインスタイル。インラインスタイルの各インスタンスには、1,000 バイトの制限があります。インラインスタイルは、<style amp-custom> の 75,000 バイトの制限に含まれます。
ドキュメントの head 内にある <style amp-keyframes> タグに定義。500,000 バイトの制限。キーフレームプロパティに制限されます。

AMP での CSS の使用に関する詳細は、スタイルとレイアウトをお読みください。

すっきりしたページを維持して高速に処理できるようにするために、AMP は <amp style-custom> タグに 75,000 バイトの CSS 制限を設けています。これを使用してアニメーションのスタイルを定義することはできますが、貴重なサイトスタイルのリソースを取り上げることなく、長々としたアニメーションを使用できるように、<amp style-keyframes> タグ内の制限は 500,000 バイトになっています。

  <style amp-custom>
    div {
      width: 100px;
      height: 100px;
      background: red;
      position: relative;
      animation: mymove 5s infinite;
    }
  </style>
</head>
<body>

<div></div>
  <style amp-keyframes>
   @keyframes mymove {
      0%   {transform: translatey(0px);}
      25%  {transform: translatey(200px);}
      75%  {transform: translatey(50px);}
      100% {transform: translatey(100px);}
    }
  </style>
</body>

クラスの追加、削除、および切り替え

AMP アクションの toggleClass を使用して、定義済みの要素にクラスを追加し、削除することができます。

elementName.toggleClass(class="className")

ハンバーガーメニューのアニメーションなど、ユーザーが操作する同一の要素のクラスを切り替えることができます。

<div
  id="hamburger"
  tabindex="1"
  role="button"
  on="tap:hamburger.toggleClass(class='close')"
></div>

force 属性を追加すると、toggleClass アクションをほかの要素にも適用して 2 つのクラス間を切り替えることができます。

<button
  on="tap:magicBox.toggleClass(class='invisible', force=true),magicBox.toggleClass(class='visible', force=false)"
>
  Disappear
</button>
<button
  on="tap:magicBox.toggleClass(class='visible', force=true),magicBox.toggleClass(class='invisible', force=false)"
>
  Reappear
</button>

クラスを削除して、適用し直せないようにする必要がある場合は、force 属性を false の値に指定して追加します。クラスを追加して削除を無効にする必要がある場合は、force 属性を true の値に指定して追加します。

CSS と状態によるアニメーション

amp-bind を使用すると、状態が指定された任意の数の CSS クラスを追加・削除することができます。

<head>
  <script
    async
    custom-element="amp-bind"
    src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"
  ></script>
  <style amp-custom>
    div {
      height: 100px;
      width: 100px;
      margin: 1em;
      background-color: green;
      margin-left: 100px;
      transition: 2s;
    }
    .visible {
      opacity: 1;
    }
    .invisible {
      opacity: 0;
    }
    .left {
      transform: translatex(-50px);
    }
    .right {
      transform: translatex(50px);
    }
    button {
      margin-top: 1rem;
      margin-left: 1rem;
    }
  </style>
</head>
<body>
  <amp-state id="magicBox">
    <script type="application/json">
      {
        "visibleBox": {
          "className": "visible"
        },
        "invisibleBox": {
          "className": "invisible"
        },
        "moveLeft": {
          "className": "left"
        },
        "moveRight": {
          "className": "right"
        }
      }
    </script>
  </amp-state>
  <div [class]="magicBox[animateBox].className"></div>
  <button on="tap:AMP.setState({animateBox: 'invisibleBox'})">Disappear</button>
  <button on="tap:AMP.setState({animateBox: 'visibleBox'})">Reappear</button>
  <button on="tap:AMP.setState({animateBox: 'moveLeft'})">Move Left</button>
  <button on="tap:AMP.setState({animateBox: 'moveRight'})">Move Right</button>
</body>

このスニペットを Playground で開く

複数のクラスのアニメーションを定義するには、まず、ドキュメントの head にある <style amp-custom> タグに CSS クラスのリストを追加します。

.visible {
  opacity: 1;
}
.invisible {
  opacity: 0;
}
.left {
  transform: translatex(-50px);
}
.right {
  transform: translatex(50px);
}

次に、各クラスと状態をペアリングします。

<amp-state id="magicBox">
  <script type="application/json">
    {
      "visibleBox": {
        "className": "visible"
      },
      "invisibleBox": {
        "className": "invisible"
      },
      "moveLeft": {
        "className": "left"
      },
      "moveRight": {
        "className": "right"
      }
    }
  </script>
</amp-state>

そして、要素とクラスをリンク付けます。

<div [class]="magicBox[animateBox].className"></div>

状態は、関連付けられた AMP アクションやイベントによって変化します。次の例では、ユーザーインタラクションによって状態が変化します。

<button on="tap:AMP.setState({animateBox: 'invisibleBox'})">Disappear</button>
<button on="tap:AMP.setState({animateBox: 'visibleBox'})">Reappear</button>
<button on="tap:AMP.setState({animateBox: 'moveLeft'})">Move Left</button>
<button on="tap:AMP.setState({animateBox: 'moveRight'})">Move Right</button>

amp-bind をこのように使用すると、定義済みのクラスに明示的にクラスを設定することができます。そのため、別のクラスを削除するように要求する必要がありません。