本文详细介绍了在amp（accelerated mobile pages）页面中实现css动画，特别是背景渐变动画的方法。针对传统html中直接应用于body的动画在amp中失效的问题，文章提出并演示了通过在body内部创建容器div并对其应用动画样式来解决。教程提供了完整的amp页面代码示例，并强调了amp css规范的关键点，确保动画效果在amp环境中稳定运行。
AMP CSS动画的挑战与原理
AMP（Accelerated Mobile Pages）旨在提供极致的网页加载速度和用户体验，因此对HTML、CSS和JavaScript的使用施加了严格的限制。在标准HTML页面中，开发者可以直接通过CSS对body元素应用复杂的背景渐变动画，例如利用background属性结合@keyframes规则来创建动态的视觉效果。然而，当尝试将这类动画迁移到AMP页面时，直接应用于body的样式可能无法按预期工作，甚至完全失效。
这主要是因为AMP为了确保性能和安全性，对DOM的直接操作和某些CSS属性的使用进行了限制。AMP的渲染机制和其内置的boilerplate样式可能会与直接作用于body的自定义动画产生冲突，导致动画无法启动或显示不正确。在这种情况下，虽然CSS规则本身没有语法错误，但在AMP的特定环境中，它们无法有效发挥作用。
解决方案：利用容器Div实现背景渐变动画
为了在AMP页面中成功实现背景渐变动画，同时遵循AMP的规范，我们可以采用一种变通的方法：将动画样式从body元素转移到一个独立的容器div元素上。这种方法既能达到预期的视觉效果，又能避免直接修改body可能带来的兼容性问题。
1. HTML结构调整
首先，在AMP页面的<body>标签内部，创建一个新的div元素。这个div将作为背景动画的实际载体。为了方便样式定义，我们可以为其添加一个特定的类名，例如divanim。
立即学习“前端免费学习笔记（深入）”；
<body>
<div class="divanim">
<!-- 页面其他内容将放置在此div内部或其兄弟元素中 -->
<!-- 例如：
<h1>欢迎来到我的AMP页面</h1>
<p>这里是页面的主要内容。</p>
-->
</div>
</body>2. CSS样式定义
接下来，将原先应用于body的背景渐变和动画样式，定义到这个新的.divanim类上。所有自定义CSS必须包含在AMP页面头部唯一的<style amp-custom>标签内。
详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。
关键在于为.divanim设置height: 100%，以确保它能够完全覆盖整个视口，从而实现全屏背景动画效果。同时，定义@keyframes规则来控制渐变背景的位置变化。
<style amp-custom>
/* 定义背景动画的容器div样式 */
.divanim {
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); /* 渐变颜色 */
background-size: 400% 400%; /* 确保渐变区域足够大，以便动画移动 */
animation: gradient 15s ease infinite; /* 应用动画，持续15秒，缓动，无限循环 */
height: 100%; /* 关键：使div高度占满父容器（body），从而覆盖整个视口 */
/* 也可以根据需要添加宽度、定位等属性，以确保其作为背景层 */
}
/* 定义渐变动画的关键帧 */
@keyframes gradient {
0% {
background-position: 0% 50%; /* 动画开始时背景位置 */
}
50% {
background-position: 100% 50%; /* 动画进行到一半时背景位置 */
}
100% {
background-position: 0% 50%; /* 动画结束时背景位置，回到初始状态 */
}
}
/* 其他自定义样式可以放在这里 */
</style>3. 完整的AMP页面示例
结合上述HTML结构和CSS样式，一个完整的AMP页面示例如下：
<!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>AMP背景渐变动画</title>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<style amp-custom>
body {
margin: 0; /* 移除body默认外边距，确保div能完全覆盖 */
padding: 0;
height: 100vh; /* 使body高度占满视口 */
overflow: hidden; /* 防止滚动条出现 */
}
.divanim {
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 400% 400%;
animation: gradient 15s ease infinite;
height: 100%; /* 确保div的高度占据父容器的100% */
width: 100%; /* 确保div的宽度占据父容器的100% */
position: absolute; /* 定位使其覆盖整个视口 */
top: 0;
left: 0;
z-index: -1; /* 将背景div置于底层 */
}
@keyframes gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
/* 其他AMP组件或页面内容的样式 */
.content {
position: relative;
z-index: 1; /* 确保内容在背景之上 */
color: #fff;
text-align: center;
padding-top: 50px;
}
</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"></div>
<div class="content">
<h1>欢迎来到AMP页面</h1>
<p>这是一个带有动态背景的AMP页面。</p>
<!-- 页面其他内容 -->
</div>
</body>
</html>注意：为了确保背景div能够完全覆盖整个页面，需要对body和.divanim进行一些额外的样式设置，如移除body的默认margin和padding，将body的高度设置为100vh，并可能使用position: absolute和z-index来精确控制背景层。
AMP CSS动画的关键注意事项
在AMP页面中实现CSS动画时，除了上述解决方案，还需要牢记以下几点AMP的CSS规范：
- <style amp-custom>标签：所有自定义CSS样式必须且只能包含在页面的<head>部分的一个<style amp-custom>标签内。不允许使用外部样式表（除了AMP组件自带的样式）。
- CSS大小限制：AMP对自定义CSS的总大小有严格限制，通常为75KB。因此，CSS代码应保持精简和优化。
- 避免!important：尽量避免在CSS中使用!important规则，因为它可能干扰AMP的内部样式处理和优化，导致不可预测的行为。
- 动画性能优化：为了最佳性能，AMP推荐使用transform和opacity属性进行动画，因为这些属性通常能由GPU加速，实现更流畅的动画效果。本教程中使用的background-position也是一个相对性能友好的属性。
- AMP Boilerplate：不要删除或修改AMP页面中必需的boilerplate样式（<style amp-boilerplate>和<noscript>内的样式），它们是AMP页面正常渲染的关键。
- 用户交互动画：对于需要用户交互触发的动画，可以考虑使用amp-animation组件，它提供了更强大的动画控制能力，并遵循AMP的性能最佳实践。
总结
在AMP页面中实现CSS动画，尤其是背景渐变动画，虽然与传统HTML页面略有不同，但通过将动画样式应用于body内部的容器div，并结合AMP的CSS规范，可以有效地达到预期的视觉效果。这种方法不仅解决了直接操作body可能遇到的兼容性问题，也确保了AMP页面在性能和用户体验方面的优势。遵循AMP的各项限制和最佳实践，是构建高性能、美观且符合AMP标准的移动页面的关键。
