如何使用CSS创建整页动画

钥匙要点

可以使用CSS 3D和2D变换和CSS动画创建整页动画，从而为Web内容提供了更具性能和灵活性的替代方案。可以使用CSS动画来转换HTML元素以实现这些效果。> 在应用CSS转换为元素时，为了确保一致的结果，无论其内容的大小如何，可以将身体元素的大小固定到浏览器窗口的大小，并且可以将内容固定在包装器中。这种方法还可以掩盖复杂内容可能发生的任何渐进式渲染，重新汇总或资源加载。
• 。 在浏览体验期间，可以在战略时期设置
动画，以使内容过渡到页面加载并在用户单击链接时看不见的视图。设置动画将页面内容转换为视图的最佳位置是元素顶部。 AnimationEnd事件可用于检测动画何时完成，然后触发导航事件。
• Internet Explorer（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);
}

让我们看一下将转换应用于身体元素时的页面前后拍摄的镜头：

应用旋转（45DEG）转换为文档的身体元素。 对于三维变换，CSS转换规范定义了可以在我们转换的元素的母体上指定的透视属性。在转换内容的元素时，必须将其应用于位于DOM层次结构中上方的元素。这样做很简单：

在元素上将其与旋转（45度）变换结合起来，会产生以下结果：>

html {
    perspective: 500px;
}

将旋转（45DEG）转换为的透视图：。

>我们可以在人体元素上操纵转化 - 原始特性以获得有趣的结果。让我们看一下几个示例： 上面的标记将沿x旋转作为人体元素设置，同时使用转化原孔将旋转的起源转移到元素的底部。有效地，这将文档的内容“进入”了这样的屏幕：

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

>

>我们还可以在文档的根部元素上操纵透视 - 原始属性，以实现离轴投影效应。将的样式更改为：

> 我们的页面现在看起来像这样：

通过使用CSS变换，我们可以轻松地操纵整个页面内容的视觉外观。由于通常仍然适用了通常的布局和尺寸规则，因此人体元素（尤其是使用百分比值或依赖转换 - 原始属性的元素）可能会导致不同的视觉效果，这取决于我们页面的内容。回想我们以前的rotatex（45DEG）示例，其中转换 - 原始素将其设置为50％100％。

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

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

请注意，内容如何实际上并不在窗口底部，而是在视口外的某个时候。这是CSS变换的预期行为：

正常布置，然后沿屏幕上某个地方的底部边缘旋转。您还会注意到，内容的实际脚印已经扩展（查看“后图”图片中的滚动条），以适应变换的内容（我们正在使用透视图投影的事实使此效果更加多发音）。

>那么，在将转换应用于我们的身体元素时，我们如何处理任意尺寸的内容？自定义调整所有内容，以确保身体的大小不会扩大超过一定量可能是不现实的。取而代之的是，我们可以使用简单的HTML/CSS模式，该模式使我们能够将身体元素的大小固定到浏览器窗口的大小，并在包装​​器

中附加内容。以下标记实现了：

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

>下面的插图显示了页面垂直滚动时发生的情况，然后我们将旋转（45DEG）直接转换为文档的

元素（左）（左）和使用包装模式（右）：>

由于离轴投影，转换的直接应用导致视觉结果偏斜（因为我们不再查看身体元素的“中心”）。使用包装器图案确保元素的观点 - 原始属性（默认为50％50％）将始终以与元素有关，从而使我们具有令人愉悦的视觉效果。

>通过利用上述模式并设置CSS随时使用百分比值转换，我们可以以一致的方式影响我们的

元素，而不论其内容的大小如何。> 从变换到动画

>整理了将CSS转换到元素的复杂性后，CSS动画是下一步。通过遵循上述原则，我们可以创建动画，以有趣的方式将我们的Web内容视为视图（或从视图中删除）。

考虑此基本@keyframes规则：

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

body {
    transform: rotateZ(45deg);
}

同样，我们可以撰写动画，这些动画会流畅地从视图中删除我们的Web内容。例如，如果我们希望我们的页面在旋转时消失到远处，我们可以使用类似的东西：

>

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

视觉结果为：

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

将动画附加到

>

>我们的目标是在浏览器体验期间在战略时期使用触发动画，以使内容过渡的外观在页面加载并在用户单击链接上时的视图时将其视为视图。

。

>在身体元素中添加动画的第一个直观位置是Onload JavaScript事件。然而，事实证明，当on load火灾实际上为时已晚时添加动画。当我们页面中的整个内容完成加载时（包括任何图像或其他带宽密集型资源），此事件实际上会触发。将动画附加到带宽密集的页面上的onload将导致我们的内容显示“正常”，然后动画触发并将内容重新包含到视图中。不完全是我们目标的效果。

> 或者，我们可以利用当浏览器完成内容的DOM结构时触发的Domcontentloaded事件（但有可能在资源完成加载之前）。 IE测试驱动器domcontentloaded演示说明了这两个事件之间的区别。但是，在具有复杂的Web内容的情况下，现代浏览器可能会选择执行“渐进式”渲染，并在加载整个DOM树之前显示页面。在这些情况下，视觉结果将类似于Onload方案。

>设置一个动画的最佳位置，该动画过渡我们的页面内容是元素的顶部。这样可以确保动画随着内容的渲染而开始正确（并且内容的启动位置将是我们所选动画的关键帧的开始位置）。这种方法的一个令人愉悦的副作用是，动画实际上可以掩盖可能与复杂内容一起发生的任何进行性渲染，重新分析或资源加载。>

>设置动画，使我们的内容过渡出来也很有趣。人们可以假设我们可以将onclick处理程序附加到我们内容中所有感兴趣的元素上（例如所有标签），并且只需在回调函数中设置相关的动画属性（Animation-name，Animation-Duration等） 。但是，如果我们实际上没有延迟导航的发生，我们将不会看到我们的预期流体过渡。

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

上注册一个动画结构的处理程序，以确保发生导航事件。

>实时演示可用

>我们创建了一个演示和教程，以使CSS变换和动画充满活力，以提供深度和示例，超出了我们在此处显示的内容。该教程本身在页面导航期间使用了全页动画，该动画在Windows 8上的Internet Explorer 10以及Chrome和Firefox的最新版本中使用。

>简单地享受页面到页面的动画，使用“继续……”链接在每个页面的右下角中浏览教程的页面。>

在教程末尾，我们提供了一些有关如何将这些动画与您自己的Web内容合并的其他指南和示例代码。

>

>将其包裹起来

CSS变换和CSS动画是两个强大的功能集，可实现更丰富，更身临其境的网络体验。通过少量努力，您可以创建网页（甚至是静态的页面），以提供流畅且几乎类似应用的导航体验。 如果您喜欢阅读这篇文章，那么您会喜欢学习；从大师那里学习新鲜技能和技术的地方。成员可以立即访问SitePoint的所有电子书和互动在线课程，例如实用的CSS。

全页CSS动画上经常询问问题

> CSS动画和JavaScript动画之间的关键区别是什么？

CSS动画和JavaScript动画具有与动画Web元素的相同目的，但它们具有一些关键差异。 CSS动画更容易实现，尤其是对于简单的动画。当浏览器的渲染引擎处理时，它们也更加友好。但是，与JavaScript动画相比，CSS动画的控制力和灵活性有限。另一方面，JavaScript动画提供了更多的控制和灵活性，可以进行复杂的动画。它们可以实时暂停，逆转或操纵，也可以响应用户互动。

>

>我如何使我的CSS动画响应？

>使CSS动画响应响应涉及相对单位喜欢百分比或视口单元，而不是像像素这样的绝对单位。这样可以确保动画尺寸正确，而不管屏幕尺寸如何。您还可以使用媒体查询根据特定的屏幕尺寸或设备类型调整动画。

>

>我可以将CSS动画与svg？

一起使用，是的，CSS动画可以与SVG一起使用（可扩展向量图形）。 SVG拥有自己的CSS属性集，可以动画，例如填充，中风和转换。与对常规的HTML元素进行动画相比，这允许更复杂，有趣的动画。

>

为什么我的CSS动画在某些浏览器中不起作用？

>并非所有浏览器都支持所有CSS动画属性。例如，Internet Explorer不支持动画触时属性。为了确保跨浏览器兼容性，您可以在动画属性之前使用-webkit-，-moz-，-o-和-ms-等供应商前缀。您还可以使用诸如AutopRefixer之类的工具自动添加这些前缀。

>

>如何优化我的CSS动画的性能？

>

>

以优化CSS动画的性能，您可以限制动画属性，尤其是触发布局的动画属性会更改宽度，高度和边距。而是使用仅触发复合变化（例如变换和不透明度）的属性。您还可以使用Will-Change属性将可能是动画化的属性通知浏览器。

>

>我可以使用CSS？

用CSS动画。这是因为它在其值之间没有中间状态。但是，您可以通过对不透明度和可见性属性进行动画效果来实现类似的效果。

如何使用CSS创建一个循环的动画？

您可以使用动画在CSS中创建一个循环动画 - 列表计数属性。通过将其价值设置为无限，动画将无限期重复。

我可以控制CSS动画的速度吗？财产。此属性定义了动画完成一个周期的时间长度。

>

>我如何暂停CSS动画？

您可以使用Animation-Play-State属性暂停CSS动画。通过将其值设置为暂停，动画将停止运行。

>我可以使用CSS？

对背景图像属性进行动画动画，而不可以CSS来动画。但是，您可以使用不透明度属性在多个背景图像之间逐渐消失来实现类似的效果。

以上是如何使用CSS创建整页动画的详细内容。更多信息请关注PHP中文网其他相关文章！