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

Question

i have a html page with gradient transition background, the background colors change automatically after 5 seconds and hense creating a animation.我有一个带有渐变过渡背景的 html 页面，背景 colors 会在 5 秒后自动更改，然后创建一个 animation。 I am using css & key frames for this.我为此使用 css 和关键帧。

I am converting this html page to a AMP page.我正在将此 html 页面转换为 AMP 页面。 This transition works in plain html pages, but shows the first color only when started in am.此过渡适用于普通的 html 页面，但仅在上午开始时才显示第一种颜色。

how can i get it working?我怎样才能让它工作？

working Code-工作代码-

index.html索引.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%;
    }
}

Answer 1

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.因此，经过一些研究和 AMP 试验后，我终于找到了自己问题的答案，将其发布在这里，以便如果有人遇到同样的问题，得到解决方案。

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.所以问题是我有一个 AMP 网页，我想让背景渐变 animation 像在 index.html 文件中一样工作，我没有，但我有解决方案。 it was no working because we were trying to manipulate body of html using css,.它不起作用，因为我们试图使用 css 来操纵 html 的主体。 which works in html, but not in css.它适用于 html，但不适用于 css。

The solution is to create a div in body tag and some changes in amp-style.解决方案是在 body 标签中创建一个 div 并在 amp-style 中进行一些更改。 .divanim is the div here .divanim 是这里的 div

Here is the working AMP page-这是工作 AMP 页面-

index.amp.html- 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.他们网站上的放大器 animation 非常令人困惑，对我来说至少是这样，但无论如何我都得到了解决方案。

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

问题描述

1 个解决方案

解决方案1
0 2022-09-25 18:10:59

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

问题描述

1 个解决方案

解决方案1 0 2022-09-25 18:10:59

解决方案1
0 2022-09-25 18:10:59