Google AMP amp-anim

Last Updated : 25 Oct, 2020

If you want to embed an animation on your AMP webpage then you can do so with this tag. It helps the developer to embed animations, gif, webp, etc in your web platform. It is really a very useful tag as having animation on your website really make it tacky and good-looking.

Setup:

To use amp-anim in your AMP webpage, you have to import this script.

HTML

<script async custom-element="amp-anim" src= 
    "https://cdn.ampproject.org/v0/amp-anim-0.1.js"> 
</script>

It is similar to amp-img in most ways.

Example:

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> 
      
    <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: green; 
            text-align: center; 
        } 
    </style> 
</head> 
  
<body> 
    <h1> 
        Geeks For Geeks 
    </h1> 
      
    <amp-anim height="300" src= 
"https://media.giphy.com/media/xULW8rv9NSbHaEe9Ak/giphy.gif"
        alt="an animation"
        attribution="GeeksForGeeks"> 
    </amp-anim> 
</body> 
  
</html>