AMP Conf 2020: Save the date!
AMP

amp-anim

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>

Examples

A runtime-managed animated image, typically a GIF.

Behavior

The amp-anim component is almost identical to the amp-img element, but allows the AMP runtime to reduce CPU usage when the animation is off-screen. Like other elements, it supports an optional placeholder child, to display while the src file is loading:

<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>

In the future, additional functionality, such as animation playback control, could be added.

Attributes

src

Similar to the src attribute on the img tag. The value must be a URL that points to a publicly-cacheable image file. Cache providers and email clients may rewrite these URLs when ingesting AMP files to point to a cached version of the image.

srcset

Same as srcset attribute on the img tag.

alt

A string of alternate text, similar to the alt attribute on img.

attribution

A string that indicates the attribution of the image. For example, attribution="CC courtesy of Cats on Flicker".

height and width

An explicit size of the image, which is used by the AMP runtime to determine the aspect ratio without fetching the image.

Common attributes

This element includes common attributes extended to AMP components.

Styling

amp-img can be styled directly via CSS properties. Setting a grey background placeholder for example could be achieved via:

amp-anim {
  background-color: grey;
}

Validation

See amp-anim rules in the AMP validator specification.

需要更多帮助?

You've read this document a dozen times but it doesn't really cover all of your questions? Maybe other people felt the same: reach out to them on Stack Overflow.

前往 Stack Overflow
找到一个 bug 或者缺失某项功能?

AMP 项目强烈鼓励您参与其中并作出贡献!我们希望您能成为我们开源社区的持续参与者,但我们也欢迎您对热衷问题做出单次贡献。

前往 GitHub