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.

srcset

Specifies the image URL to use in different circumstances. Operates the same as the srcset attribute on the img tag.

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.

Perlu bantuan lainnya?

Anda telah membaca dokumen ini belasan kali, tetapi belum semua pertanyaan Anda terjawab? Mungkin orang lain merasakan hal yang sama. Berinteraksilah dengan mereka di Stack Overflow.

Kunjungi Stack Overflow
Menemukan bug atau ada fitur yang kurang?

Proyek AMP sangat menganjurkan partisipasi dan kontribusi Anda! Kami berharap Anda akan terus ambil bagian dalam komunitas sumber terbuka kami, tetapi kami juga menerima kontribusi satu kali untuk topik tertentu yang Anda minati.

Kunjungi GitHub