如何使用CSS创建全页动画

诸如Internet Explorer 10之类的现代浏览器支持CSS 3D和2D转换以及CSS动画 。 通过利用GPU的强大功能并从常规JavaScript异步运行，这些技术为Web内容提供了比传统的基于脚本的动画更高效，更灵活的替代方法。

在之前的文章中，我已经讨论了如何使用CSS 3D变换以及CSS动画和过渡进行构建。 在本文中，我将通过描述“全页动画”的概念来介绍这些技术的“非常规”用例，该概念可以在导航过程中使用，以增加浏览的流畅性和连续性。 我们的目标是实现无缝浏览体验，在这种浏览体验中，当用户访问页面时内容可以平滑地显示在视图中，而当用户单击链接或执行相关操作时其内容就会过渡。

这些效果可以通过使用CSS动画转换HTML 元素来实现。 但是，此用例提出了一些我们认为值得讨论的考虑因素，例如布局和大小对转换 ，以及如何适当地定时页面导航，以使其与我们的动画正确地啮合。

这篇文章中的代码示例使用了IE10 Release Preview支持的非前缀CSS标记； 其他浏览器可能要求使用的CSS动画和CSS转换属性带有供应商前缀。

转换页面的整个内容

CSS转换是在HTML DOM元素的样式属性上定义的。 例如，使元素沿其Z轴旋转45度的标记如下所示：

#element {
    transform: rotateZ(45deg);
}

将转换附加到HTML文档的元素的工作方式完全相同。 因此，为了将相同的效果声明性地添加到文档的您可以执行以下操作：

body {
    transform: rotateZ(45deg);
}

让我们看一下将转换应用于body元素时的页面前后截图：

将rotateZ(45deg)变换应用于文档的body元素。

对于三维转换，CSS Transforms规范定义了可以在我们转换的元素的父级上指定的Perspective属性。 转换内容的元素时，必须将其应用于DOM层次结构中位于其上方的元素。 这样做很简单：

html {
    perspective: 500px;
}

将其与元素上的rotateY(45deg)变换结合使用rotateY(45deg)以下结果：

向施加一个rotate(45deg)变换，其perspective: 500px为上设置的perspective: 500px 。

我们可以操纵body元素上的transform-origin属性以获得有趣的结果。 让我们看几个例子：

body {
    transform-origin: 50% 100%;
    transform: rotateX(45deg);
}

上面的标记为body元素设置了沿X的旋转，同时使用transform-origin将旋转原点移动到元素的底部。 实际上，这样可以将文档的内容“旋转”到屏幕中，如下所示：

我们还可以在文档的根元素上操纵perspective-origin属性，以实现离轴投影效果。 将的样式更改为：

html {
    perspective: 500px;
    perspective-origin: 90% 50%;
}

现在，我们的页面如下所示：

通过使用CSS变换，我们可以轻松地操纵整个页面内容的视觉外观。 由于仍然可以使用通常的布局和大小调整规则，因此，对body元素的某些转换（尤其是使用百分比值或依赖于transform-origin属性的transform-origin ）可能会导致不同的视觉效果，具体取决于我们页面的内容。 回想一下我们以前的transform-origin rotateX(45deg)示例，其transform-origin设置为50% 100% 。

在下面，您可以查看应用转换前后的结果。

请注意，内容实际上并不是在窗口底部旋转，而是在视口之外的某个位置旋转。 这是CSS变换的预期行为： 正常布置，然后沿着其底部边缘（不在屏幕上的某个位置）旋转。 您还将注意到，内容的实际足迹已经扩大（请看“之后”图片中的滚动条）以适应转换后的内容（我们使用透视投影的事实使这种效果更加明显）。发音）。

那么，当将变换应用于我们的body元素时，我们如何处理任意大小的内容？ 定制所有内容以确保主体的大小不会扩展到超过特定量的做法可能是不现实的。 相反，我们可以使用简单的HTML / CSS模式，该模式允许我们将body元素的大小固定为浏览器窗口的大小，并将内容附加在包装器

。 通过以下标记即可实现：

html, body {
    width: 100%;
    height: 100%;
    min-width: 100%;
    max-width: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
}
 
#Wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: scroll;
}

下图显示了当页面垂直滚动并且我们直接（左）并使用包装模式（右）对我们的文档的元素应用rotateY(45deg)转换时发生的情况：

由于轴外投影，直接应用变换会导致视觉效果偏斜（因为我们不再关注body元素的“中心”）。 使用包装模式可确保元素的perspective-origin属性（默认为50% 50% ）始终相对于元素正确居中，从而为我们带来令人愉悦的视觉效果。

通过利用上述模式并在可能的情况下使用百分比值设置CSS转换，我们可以以一致的方式影响元素，而不管其内容的大小。

从变形到动画

解决了将CSS变换应用于元素的复杂问题，下一步是CSS动画。 通过遵循上述原理，我们可以创建动画，以有趣的方式将我们的Web内容显示（或从视图中删除）。

考虑以下基本@keyframes规则：

@keyframes rotateInLeft {
from {
     transform-origin: 0% 0%;
     transform: rotateY(180deg);
     }
to {
   transform-origin: 0% 0%;
   transform: rotateY(0deg);
   }
   }

当应用于元素时，此动画将使其在其左侧旋转。 当将其应用于使用我们的包装模式的元素时，视觉效果会更有趣。 该文档实际上将从浏览器窗口的可见区域之外旋转到完整视图：

同样，我们可以制作动画，从而将Web内容从视图中流畅地移除。 例如，如果我们希望页面在旋转时消失在远方，则可以使用如下代码：

@keyframes whirlOut {
to {
    transform: scale(0) rotateZ(1260deg);
   }
}

视觉结果为：

由于我们可以利用CSS动画的全部功能来影响整个Web内容，因此在生成这些页面效果方面我们具有很大的灵活性（而且我们当然不仅限于使用CSS变换）。 但是，一旦构成了我们想要应用于内容的效果，我们如何使它们在页面导航过程中触发？

将动画附加到

我们的目标是在浏览器体验期间的关键时刻使用触发动画，以使内容外观在页面加载时过渡到视图中，而在用户单击链接时过渡到视图之外。

将动画添加到body元素的第一个直观位置是onload JavaScript事件。 但事实证明，在onload触发时添加动画实际上为时已晚。 当我们页面中的全部内容完成加载（包括任何图像或其他占用带宽的资源）时，实际上会触发此事件。 将动画附加到onload大量带宽的页面上时，将导致我们的内容“正常显示”，然后动画触发并将内容重新显示。 不完全是我们想要的效果。

另外，我们可以利用DOMContentLoaded事件，该事件在浏览器完成解析内容的DOM结构时触发（但有可能在资源完成加载之前触发）。 IE Test Drive DOMContentLoaded演示说明了这两个事件之间的区别。 但是，在复杂的Web内容的情况下，现代的浏览器可能会选择执行“渐进式”呈现，在加载整个DOM树之前显示页面。 在这些情况下，视觉结果将类似于onload场景。

设置动画以在视图中过渡页面内容的最佳位置是内嵌在元素的顶部。 这样可以确保动画在内容呈现时就正确开始（并且内容的起始位置将是我们所选动画的from关键帧的起始位置）。 这种方法的令人愉快的副作用是，动画实际上可能掩盖了复杂内容可能发生的任何渐进式渲染，重新布局或资源加载。

设置动画使我们的内容移出视线也很有趣。 可以假设我们可以将onclick处理程序附加到内容中所有感兴趣的元素（例如所有标记），并只需在callback函数中设置相关的动画属性(animation-name ， animation-duration等）。 。 但是，如果我们实际上不延迟导航的进行，则不会看到预期的平稳过渡。

这是利用CSS动画规范中描述的动画事件的好机会。 特别是，我们可以使用animationend事件来检测动画何时完成，然后触发导航（例如，通过设置window.location.href ）。 因此，我们的onclick将触发“从视图中删除”动画，并在上为animationend注册一个处理程序，以确保发生导航事件。

现场演示可用

我们已经创建了一个演示和教程，介绍如何使用CSS Transforms＆Animations使页面生动活泼，这些内容提供了超出我们此处所能展示的深度和示例。 本教程本身在页面导航期间利用了整页动画，该动画可在Windows 8上的Internet Explorer 10以及最新版本的Chrome和Firefox中使用。

要简单地享受页面到页面的动画，请使用每页右下角的“继续到...”链接逐步浏览教程的页面。

在本教程的最后，我们提供了有关如何将这些动画与您自己的Web内容结合在一起的其他指导和示例代码。

包起来

CSS转换和CSS动画是两个功能强大的功能集，可实现更丰富，更身临其境的Web体验。 您只需花费很少的精力就可以创建Web页面（甚至是静态页面），从而提供流畅的，几乎类似于应用程序的导航体验。

如果您喜欢阅读这篇文章，您会喜欢Learnable的 ； 向大师学习新鲜技能的地方。 会员可以立即访问所有SitePoint的电子书和交互式在线课程，例如实用CSS 。

From: https://www.sitepoint.com/how-to-create-full-page-animations-using-css/