文将向您展示如何创建简单而新式的页面切换的过渡效果。也许你已经发现了一些在或Keep Portland Weird等网站上看到的很酷的效果，其中两层或多层叠加层在页面上进行动画处理以显示一些新内容。让我们看看他们如何做到这一点。我们只关注动画部分，而不是内容的加载。对于效果，我们将使用CSS动画。

页面框架

对于我们的简单演示，我们将创建一个完整的宽度和高度布局，其中一些箭头将触发叠加动画。想法是显示一个页面，并在叠加动画的中间，切换到另一个页面。虽然使用的是静态内容，但你可以在动画过程中插入动态解决方案，以便即时获取一些数据。

我们的HTML标签如下：

叠加层的结构将使用JavaScript插入，它作为一个固定元素放在所有其他元素之上。根据页面指示方向，为该元素提供一些CSS样式类，以正确地应用样式。叠加层将包含预先定义好的多个层。每个层都设置不同的背景颜色以及特定的动画。

页面代码类似如：

每层还设置不同的背景颜色。为了展示独特的效果，将为每个层设置不同的动画。为此，我们最初将父层设置为屏幕外（off-screen）位置，然后将该层动画化。主要元素的初始设置在脚本中完成（见下文）。然后在样式表中定义层的动画行为，这取决于效果类，以及要显示的页面的其他样式。

CSS

首先，让我们看一下我们的主体，容器和页面的一些常规样式（省略供应商前缀）：

我们希望我们的页面是全宽和高度，并隐藏任何溢出。默认情况下，使用JS（我们使用Modernizr），页面被隐藏，当前类将相应的页面设置为可见。我们希望确保我们的布局在没有JavaScript的情况下正常运行，因此我们添加了"条件"样式。

让我们来展示的风格是怎样的。我们开始层置于所有之上，而且具有固定的位置：

根据当前使用的方向，需要设置一些初始定位样式。正如稍后将看到的JavaScript角本，我们将设置一些其他的变换，以确保我们的初始层的顶部始终是面向屏幕的那个。这将简化效果，因为内层动画将始终相同（向上移动），因此如果父项旋转并正确定位，我们无需为每个方向定义新动画：

图层将具有默认背景颜色，然后以动态方式为每个效果单独定位：

接下来，让我们看看一个示例效果。三层效果通过特殊的为每个图层添加动画。anim-Effect类被添加到主体中，以便我们知道我们目前使用的是哪种效果。该revealer–animate是考虑到初始顺序和触发动画。

正如我们在这里看到的，我们将向所有图层添加相同的动画属性，但动画名称除外。通过三种不同的动画，我们定义了关键帧中每个动画的延迟。就像我们一样，我们确保所有动画在同一时刻结束，但允许不同的外观时间：

我们在这里做的是让第一层先移动，然后在中间"暂停"直到75％，同时在可见屏幕的顶部。然后我们将其移向相反的方向以显示新内容。对于其他两个层也是如此，只是在这里我们在不同的关键帧处启动它们，减少"暂停"。最后一层根本没有暂停，只是从25％开始到另一边。

JavaScript

我们做了一个小插件，根据一些选项创建了revealer 。默认选项如下：

添加启动器及其图层和相应效果类的功能如下所示：

最关键的函数设置我们的揭密元素的初始定位，并添加用于触发动画和所选效果的控件类。

根据我们选择的方向，我们需要确保揭示元素获得正确的变换。请记住，我们只是简单地旋转和定位探测器，使顶部始终面向屏幕，以便层始终向上移动。对于角落情况，我们需要确保展示器的宽度和高度正确设置到页面的对角线。对于左右两种情况，我们需要确保展示器的高度是屏幕的宽度，因为我们将它旋转90度。

以上讲述了通过CSS和JavaScript实现多层页面的切换动画效果，希望这个小的技巧能对你有所帮助。如果感兴趣，你还可以访问以下地址，查看动画的效果的Demo。

http://www.ikinsoft.com/demo/ani_effects/index.html

着html5的来袭，我们不难发现，生活工作中浏览的网站也变的高大上起来，在这背后我们就要考虑这些高大上的效果如何去实现，如何更接地气，那么我们今天来说一个简单的小例子：利用CSS3动画知识实现三角形叠加效果，来来来看图说话。

CSS3三角形叠加效果

看完动态效果大家更想知道其代码设计咯，我们一起来看核心代码：

-moz-transition: all 0.5s ease-out;

-ms-transition: all 0.5s ease-out;

-o-transition: all 0.5s ease-out;

-webkit-transition: all 0.5s ease-out;

更多详细实现过程，可以点击如下讲解：

<script src="https://lf6-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>

更多案例分享可加群142991222关注