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. For emails, the URL must be https.
|
| 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