类似地，我们可以编写动画，将我们的 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 情形。
设置动画以便将页面内容过渡性地加载到视图中的最佳位置是在 <body> 元素的顶部内联。这可以确保动画将在呈现内容时开始播放（内容的起始位置就是我们选择的动画的 from 关键帧的起始位置）。这种方法的一个好处就是动画可以实际掩盖在加载复杂内容时可能出现的任何激进式的呈现、重新布局或资源加载。
设置动画使我们的内容逐渐淡出视图，这也非常有趣。用户可以假设，我们可以将 onclick 处理程序附加到内容中所有感兴趣的元素（例如所有 <a> 标记），只需在回调函数中设置相关动画属性（animation-name、animation-duration 等）。不过，如果我们并未实际推迟导航的发生，将不会看到我们期待的流畅过渡。
这是利用 CSS 动画规范中描述的动画事件的好机会。特别地，我们可以使用 animationend 事件检测动画何时完成并触发导航（例如，通过设置 window.location.href）。因此，我们的 onclick 将触发“从视图中删除”动画，并且为 <body>上的 animationend 注册一个处理程序，这将确保导航事件发生。
提供实时演示
我们已经创建了一个 演示和一个教程（英语），教程内容是有关如何令页面实时使用 CSS 转换和动画，提供了深度介绍以及一些未在本文中提供的示例。该教程本身在页面导航中利用了整页动画，可以 在 Windows 8 Internet Explorer 10 以及 Chrome 和 Firefox 的最新版本上运行。
要简单地享受页面到页面的动画，只需使用每个页面的右��角的“Continue to ...”（继续）链接来浏览整个教程的页面。
在教程的结尾，我们提供了一些额外的指导和示例代码，是有关如何将这些动画内容与您自己的 Web 内容合并。
总结
CSS 转换和 CSS 动画是两个强大的功能集，可以提供丰富的沉浸式 Web 体验。本博文概述了使用 CSS 转换和 CSS 动画完整呈现 Web 内容时的注意事项。只需很少的工作，您就可以创建 Web 页面（有可能是静止页面），提供一个流畅且类似于应用程序的导航体验。
—Internet Explorer 图形主管项目经理 Charilaos “Harris” Papadopoulos
相关文章
精彩导读
热门资讯
关注我们
