html css asynchronous-messaging-protocol

How to add CSS animations in an AMP website?

i have a html page with gradient transition background, the background colors change automatically after 5 seconds and hense creating a animation. I am using css & key frames for this.

I am converting this html page to a AMP page. This transition works in plain html pages, but shows the first color only when started in am.

how can i get it working?

working Code-

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
</head>

<body>

    <body style="background-color:#2c3333;"></body>

    
</body>
</html>


Style.css-
.user {
    display: inline-block;
    width: 170px;
    height: 170px;
    border-radius: 50%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

body {
    font-size: 1em;
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: gradient 7s ease infinite;
}

.head-div {
    text-align: center;
    color: #000000;
    /*   padding:0%;
      padding-top:7%;
      padding-bottom:300%; */
}

img {
    pointer-events: none;
    display: inline-block;
    width: 150px;
    height: 150px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    object-fit: cover;
}

.link-div {
    padding: 10%;
    padding-top: 1%;
    padding-bottom: 1%;
    color: #2c3333;
}

.alink {
    text-align: center;
    margin-top: 1px;
    padding: 20px 0;
    max-width: 590px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    background-color: #ffffff;
    color: #2c3333;
    text-decoration: none;
}

.alink:hover {
    color: #ffffff;
    background-color: #54bab9;
    border: 2px solid;
    border-color: #ffffff;
}

.copyright {
    text-align: center;
    color: #ffffff;
}

.getlink {
    font-size: 17px;
    text-align: center;
    color: #ffffff;
}

.footer {
    position: fixed;
    bottom: 25px;
    left: 0;
    right: 0;
    text-align: center;
}

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

Solution

SO after some Research and experimenting with AMP, finally i came with an answer to my own problem, Posting this here so that if any one gets the same problem, Gets a solution.

So the problem was that i was having a AMP webpage and i wanted to get the background Gradient animation working like it is working in the index.html file, i was not, but i have solution. it was no working because we were trying to manipulate body of html using css,. which works in html, but not in css.

The solution is to create a div in body tag and some changes in amp-style. .divanim is the div here

Here is the working AMP page-

index.amp.html-

<!DOCTYPE html>
<html amp lang="en">

<head>
   <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ashutosh_7i</title>
   <script async src="https://cdn.ampproject.org/v0.js"></script>
   <style amp-custom>

        .divanim {
      background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
      background-size: 400% 400%;
      animation: gradient 15s ease infinite;
      height: 100%;
    }

    @keyframes gradient {
      0% {
        background-position: 0% 50%
      }

      50% {
        background-position: 100% 50% 
      }

      100% {
        background-position: 0% 50%
      }
    }
    </style>
    
    <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>
</head>


<body>
<div class="divanim">

//body with gradient
</div>
</body>

</html>

amp animation on their website is very confusing , alteast for me, but i got the solution anyways.😉