觸發 CSS 動畫和轉場效果

CSS 動畫可讓網頁元素從一種 CSS 樣式配置轉換到另一種。瀏覽器可以在載入時啟動定義的動畫，但是事件觸發的 CSS 動畫仰賴於新增和移除類別。AMP 支援這兩種動畫類型。

當您有較小、包含式的動畫，且不需要精確計時時，請使用 CSS。

定義 CSS 和關鍵影格

您可以使用以下方式在 AMP 中定義 CSS

在文件 head 標籤內的 <style amp-custom> 標籤中。限制為 20,000 位元組。
行內樣式。每個行內樣式實例的限制為 1,000 位元組。行內樣式計入 <style amp-custom> 的 20,000 位元組限制中。
在文件 head 標籤內的 <style amp-keyframes> 標籤中。限制為 500,000 位元組。僅限於關鍵影格屬性。

請參閱樣式與版面配置，瞭解如何在 AMP 中使用 CSS 的更多資訊。

為了讓您的廣告保持精簡和快速，AMP 在 <amp style-custom> 標籤中強制執行了 20,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')">

toggleClass 動作也可以應用於其他元素，並透過新增 force 屬性在兩個類別之間切換。

<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>

如果您需要移除類別並禁止重新應用，請新增值為 false 的 force 屬性。如果您需要新增類別並禁止移除，請新增值為 true 的 force。

使用 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會將類別明確設定為定義的類別。您不必告訴它移除其他類別。