amp-anim

Introduction

Use amp-anim to embed animations (gif, webp) into your AMP HTML files. Animation files should be loaded via HTTPS.

Setup

Import the animation component in the header.

<script async custom-element="amp-anim" src="https://cdn.ampproject.org/v0/amp-anim-0.1.js"></script>

Basic usage

A basic embed. The usage of amp-anim is similar to that of amp-img.

<amp-anim width="245" height="300" src="/static/samples/img/gopher.gif" alt="an animation" attribution="The Go gopher was designed by Reneee French and is licensed under CC 3.0 attributions.">
</amp-anim>

Placeholder

You can use amp-img as a placeholder when loading of src file takes time. The placeholder attribute must be added to the nested amp-img in this case.

<amp-anim width="245" height="300" src="/static/samples/img/gopher.gif" alt="an animation" attribution="The Go gopher was designed by Reneee French and is licensed under CC 3.0 attributions.">
  <amp-img placeholder width="245" height="300" src="/static/samples/img/gopher.png"></amp-img>
</amp-anim>

さらに説明が必要ですか？

このページの説明でご質問のすべてを解消できない場合は、あなたの実際の使用事例について他の AMP ユーザーに問い合わせて話し合ってください。

Stack Overflow にアクセスする

説明されていない機能ですか？

AMP プロジェクトでは皆さんの参加と貢献を強くお勧めしています！当社はオープンソースコミュニティに継続的にご参加いただくことを希望しますが、特に熱心に取り組んでいる問題があれば1回限りの貢献でも歓迎します。

GitHub でサンプルを編集する

Written by @sebastianbenz