Skip to content

Latest commit

 

History

History
85 lines (65 loc) · 2.85 KB

amp-anim.md

File metadata and controls

85 lines (65 loc) · 2.85 KB
Raw

amp-anim

Description A runtime-managed animated image, typically a GIF.
Availability Stable
Required Script <script async custom-element="amp-anim" src="https://cdn.ampproject.org/v0/amp-anim-0.1.js"></script>
Supported Layouts fill, fixed, fixed-height, flex-item, nodisplay, responsive
Examples Annotated code example for amp-anim

Behavior

The amp-anim component is very similar to the amp-image element, and provides additional functionality to manage loading and playing of animated images such as GIFs.

The amp-anim component can also have an optional placeholder child, to display while the src file is loading. The placeholder is specified via the placeholder attribute:

<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

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 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. E.g. attribution="CC courtesy of Cats on Flicker"

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.