title: How to add CSS animations in an AMP website?
body: <p>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 &amp; key frames for this.</p>
  <p>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.</p>
  <p>how can i get it working?</p>
  <p><strong>working Code-</strong></p>
  <ol>
  <li>index.html</li>
  </ol>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
  
  &lt;head&gt;
      &lt;meta charset=&quot;UTF-8&quot;&gt;
      &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot;&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
      &lt;body style=&quot;background-color:#2c3333;&quot;&gt;&lt;/body&gt;
  
      
  &lt;/body&gt;
  &lt;/html&gt;
  
  
  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%;
      }
  }
  </code></pre>