如何在 AMP 网站中添加 CSS 动画？答案

【问题标题】：How to add CSS animations in an AMP website?如何在 AMP 网站中添加 CSS 动画？
【发布时间】：2022-09-26 02:10:59
【问题描述】：

我有一个带有渐变过渡背景的 html 页面，背景颜色会在 5 秒后自动更改，然后创建动画。我为此使用 css 和关键帧。

我正在将此 html 页面转换为 AMP 页面。此过渡适用于纯 html 页面，但仅在上午开始时才显示第一种颜色。

我怎样才能让它工作？

工作代码-

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%;
    }
}

标签： html css asynchronous-messaging-protocol

【解决方案1】：

所以经过一些研究和 AMP 试验后，我终于找到了自己问题的答案，在这里发布这个，以便如果有人遇到同样的问题，得到一个解决方案。

所以问题是我有一个 AMP 网页，我想让背景渐变动画像在 index.html 文件中一样工作，我不是，但我有解决方案。它不起作用，因为我们试图使用 css 来操作 html 的主体。它适用于html，但不适用于css。

解决方案是在 body 标签中创建一个 div 并在 amp-style 中进行一些更改。 .divanim 是这里的 div

这是工作 AMP 页面-

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 动画非常令人困惑，对我来说是 aleast，但无论如何我得到了解决方案。?

【讨论】：