AMP

amp-anim

Description

Manages an animated image, typically a GIF.

 

Required Scripts

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

Usage

The amp-anim component displays a GIF animation with optimized CPU management.

The amp-anim component lets the AMP framework reduce the resources it spends on the animation when it's off-screen. Otherwise, the behavior of amp-anim is identical to amp-img. You can implement a placeholder element to further optimize amp-anim.

<amp-anim width="400" height="300" src="my-gif.gif">
  <amp-img placeholder width="400" height="300" src="my-gif-screencap.jpg">
  </amp-img>
</amp-anim>

Attributes

src

Specifies the URL for a GIF image.

In an AMP email, the src must point to an absolute https URL. Use of amp-anim in email doesn't allow the following attributes:

  • srcset
  • object-fit
  • object-position

alt

Provides a string of alternate text for accessibility purposes. Operates the same as the alt attribute on the img tag.

attribution

Indicates the attribution of the image. For example, attribution="CC courtesy of Cats on Flicker".

width and height

Provides the explicit size of the image.

Common attributes

amp-anim includes the common attributes extended to AMP components.

Styling

You can directly style amp-anim with CSS properties. The following example sets a grey background placeholder:

<style amp-custom>
  .amp-anim {
      background-color: grey;
  }
</style>

Validation

See amp-anim rules in the AMP validator specification.

さらに支援が必要ですか?

このドキュメントを何度読み返しても、ご質問のすべてを完全に解消することができませんか?他にも同じ事を感じた人がいるかもしれません。Stack Overflow で問い合わせてみましょう。

Stack Overflow にアクセスする
バグや不足している機能がありますか?

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

GitHub にアクセスする