Si desea incrustar una animación en su página web de AMP, puede hacerlo con esta etiqueta. Ayuda al desarrollador a incrustar animaciones, gif, webp, etc. en su plataforma web. Realmente es una etiqueta muy útil, ya que tener una animación en su sitio web realmente lo hace atractivo y de mal gusto.
Configuración: para usar amp-anim en su página web de AMP, debe importar este script.
HTML
<script async custom-element="amp-anim" src= "https://cdn.ampproject.org/v0/amp-anim-0.1.js"> </script>
Es similar a amp-img en la mayoría de los aspectos.
Para agregar un marcador de posición, usaremos amp-img para agregar un marcador de posición que se mostrará si la animación no está cargada.
HTML
<amp-img placeholder src="#"> </amp-img>
Ejemplo:
HTML
<!doctype html>
<html amp>
<head>
<meta charset="utf-8">
<title>Google AMP amp-anim</title>
<script async src=
"https://cdn.ampproject.org/v0.js">
</script>
<!-- Import animation component in header -->
<script async custom-element=
"amp-anim" src=
"https://cdn.ampproject.org/v0/amp-anim-0.1.js">
</script>
<meta name="viewport" content=
"width=device-width,minimum-scale=1,initial-scale=1">
<link rel="canonical" href=
"https://amp.dev/documentation/examples/components/amp-anim/index.html">
<style amp-boilerplate>
body {
-webkit-animation: -amp-start 8s
steps(1, end) 0s 1 normal both;
-moz-animation: -amp-start 8s
steps(1, end) 0s 1 normal both;
-ms-animation: -amp-start 8s
steps(1, end) 0s 1 normal both;
animation: -amp-start 8s
steps(1, end) 0s 1 normal both
}
@-webkit-keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
@-moz-keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
@-ms-keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
@-o-keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
@keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
</style>
<noscript>
<style amp-boilerplate>
body {
-webkit-animation: none;
-moz-animation: none;
-ms-animation: none;
animation: none
}
</style>
</noscript>
<style amp-custom>
h1 {
color: forestgreen;
}
</style>
</head>
<body>
<center>
<h1>
Geeks For Geeks
</h1>
</center>
<amp-anim height="300" src=
"https://media.giphy.com/media/xULW8rv9NSbHaEe9Ak/giphy.gif"
alt="an animation"
attribution="GeeksForGeeks">
<amp-img placeholder height="300"
src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200811003251/logo.png">
</amp-img>
</amp-anim>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por aditya_taparia y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA