Do you build things with AMP? Fill out the AMP Developer Survey!
AMP

Important: this documentation is not applicable to your currently selected format stories!

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.

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-img with CSS properties. The following example sets a grey background placeholder:

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

Validation

See amp-anim rules in the AMP validator specification.

Daha fazla yardıma mı ihtiyacınız var?

Bu belgeyi defalarca okudunuz ama tüm sorularınıza tatmin edici bir yanıt bulamadınız mı? Belki başka kişiler de bu şekilde hissetmiştir: Stack Overflow'dan onlara ulaşın.

Stack Overflow'a git
Bir hata veya eksik bir özellik mi buldunuz?

AMP projesi, katılımınızı ve katkılarınızı güçlü bir şekilde teşvik ediyor! Açık kaynak topluluğumuzun devamlı bir katılımcısı olacağınızı umuyoruz ancak özel olarak ilgilendiğiniz konularla ilgili tek seferlik katkıları da memnuniyetle karşılıyoruz.

GitHub'a git