amp-anim

A runtime-managed animated image, typically a GIF.

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, intrinsic, nodisplay, responsive
Examples	Annotated code example for amp-anim

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

Go to Stack Overflow

Found a bug or missing a feature?

The AMP project strongly encourages your participation and contributions! We hope you'll become an ongoing participant in our open source community but we also welcome one-off contributions for the issues you're particularly passionate about.

Go to GitHub