amp-anim
Introduction
Use amp-anim
to embed animations (gif, webp) into your AMP HTML files. Animation files should be loaded via HTTPS.
Setup
Import the animation component in the header.
<script async custom-element="amp-anim" src="https://cdn.ampproject.org/v0/amp-anim-0.1.js"></script>
Basic usage
A basic embed. The usage of amp-anim
is similar to that of amp-img
.
<amp-anim width="245" height="300" src="https://amp.dev/static/samples/img/gopher.gif" alt="an animation" attribution="The Go gopher was designed by Reneee French and is licensed under CC 3.0 attributions.">
</amp-anim>
Placeholder
You can use amp-img
as a placeholder when loading of src
file takes time. The placeholder
attribute must be added to the nested amp-img
in this case.
<amp-anim width="245" height="300" src="https://amp.dev/static/samples/img/gopher.gif" alt="an animation" attribution="The Go gopher was designed by Reneee French and is licensed under CC 3.0 attributions.">
<amp-img placeholder width="245" height="300" src="https://amp.dev/static/samples/img/gopher.png"></amp-img>
</amp-anim>
إذا لم تكن الإيضاحات الموجودة في هذه الصفحة تُجيب على جميع أسئلتك، فلا تتردد في التواصل مع مستخدمي AMP الآخرين لمناقشة حالة الاستخدام المحددة لديك بالضبط.
الذهاب إلى Stack Overflow هل هي ميزة غير موضحة؟يشجع مشروع AMP مشاركتك ومساهمتك بشدة! ونأمل أن تكون مشاركًا دائمًا في مجتمعنا مفتوح المصدر، ولكننا نشجع أيضًا المساهمات التي تحدث لمرة واحدة في الأمور التي تتحمس لها.
تعديل العينة على GitHub-
Written by @sebastianbenz