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>

Ejemplos

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.

¿Necesita ayuda adicional?

¿Ha leído este documento una docena de veces pero realmente no responde todas sus preguntas? Quizás otras personas piensen lo mismo: póngase en contacto con ellas en Stack Overflow.

Ir a Stack Overflow
¿Encontró un error o considera que falta una función?

¡El proyecto AMP alienta profundamente su participación y contribuciones! Esperamos que se convierta en un miembro permanente de nuestra comunidad de código abierto, pero también agradecemos las contribuciones esporádicas sobre los temas que le apasionan especialmente.

Ir a GitHub