插件说明：4个纯CSS3炫酷页面切换过渡动画效果
这是一个纯CSS3的页面切换动画特效，有4种炫丽效果。 CSS3页面过渡动画是使用CSS关键帧制作的，所有动画效果和延迟都是使用CSS属性制作的，没有任何javascript timeout()代码。
所有4个页面切换效果都使用相同的js文件（用于点击波形和页面关闭波形）和CSS文件。 每个demo的类名都略有不同。 所有演示均已在 Chrome、Safari、Firefox、Opera、IE11 和 IE10 浏览器（以及 iOS）上进行了测试。 下面文章中的代码没有添加浏览器厂商的前缀。 实际代码需要添加-webkit-和-moz-前缀。 Opera和IE10+浏览器不需要添加制造商的前缀。 对于浏览器供应商前缀，您可以阅读 W3C 有关供应商前缀的文档。
关于基本 CSS3 动画
CSS3的keyframes属性可以让我们轻松控制某个元素在某个时刻的CSS样式。 您可以控制动画的开始时间为0%，结束时间为100%。 关键字 from 和 to 相当于 0% 和 100%。 出于兼容性原因，请确保动画开始和结束时间值始终为 0% 和 100%。
CSS 关键帧的句子格式
CSS关键帧的语句格式如下：
<pre class="brush:css;toolbar:false">/* Percentage */
@keyframes moveTop {
0% { top: 0px; }
100% { top: 100px; }
}
/* From -> To */
@keyframes moveTop {
from { top: 0px; }
to { top: 100px; }
}
声明里面的句子后，可以通过animation属性给任意元素添加moveTop动画规则。 对于CSS3动画，可以阅读W3C的CSS3动画相关文档。
CSS动画句子格式
CSS动画语句的语法如下：
.animated { 动画：moveTop 2s 3; }
上面这句话会在.animated元素上执行一个moveTop帧动画，动画会在2秒内执行3次。
制作方法
下面就以第一个效果为例，讲解那些页面加载过渡动画效果的制作技巧。
HTML结构
第一个DEMO的HTML结构非常简单。 4个导航按钮放置在元素中，元素中的内容就是要切换的页面内容，默认是隐藏的。
Section 1
Lorem ipsum dolor sit amet...
Section 2
Lorem ipsum dolor sit amet...
该代码使用导航按钮的数据属性来与其各自的笔画页面关联。 这些将使用 js 预先处理。
CSS样式
以下是导航按钮的一些基本样式。 每个按钮都是一个大圆圈css3过渡效果，中间有一个图标。 它们被设计为响应式布局。 并为每个按钮制定.active、.active_reverse、.inactive的样式。
.nav {
width: 80%;
max-width: 420px;
margin: 90px auto 90px;
font-size: 33px;
}
/* Nav elements */
.nav-el {
position:relative;
display: inline-block;
float: right;
width: 47.5%;
padding-bottom: 47.5%;
color: white;
background-color: #16a085;
transition: background-color .3s ease-in;
z-index: 10;
}
.nav-el:hover, .nav-el.active {
background-color: #107360;
}
.nav-el.active_reverse {
background-color: transparent;
}
/* Active button always on top */
.nav-el.active, .nav-el.active_reverse {
z-index: 11;
}
/* Prevent click/hover on inactive buttons */
.nav-el.inactive {
pointer-events: none;
cursor: default;
}
/* Specific floating and margin */
.nav-el:nth-of-type(2n+1) { float: left; }
.nav-el:nth-of-type(n+3) { margin-top: 5%; }
/* Icons are horizontally/vertically centered */
[class^="icon-"], [class*=" icon-"] {
position: absolute;
display: inline-block;
top: 50%;
left: 50%;
line-height: 0;
width: 1em;
所有的遮罩层都是固定定位，默认情况下是隐藏的。
/* Overlay */
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: auto;
z-index: 9999;
visibility: hidden;
}
.close {
position: absolute;
top: 50px;
right: 50px;
font-size: 36px;
}
元素的隐藏掩码上还有一个额外的类noscroll，稍后会用到：
.noscroll {
overflow: hidden;
height: 100%;
width: 100%;
}
CSS3 动画动画
活跃状态
该状态是整个页面过渡动画的核心，每1.6秒将页面上的所有动画元素动画一次：
单击每个按钮后的动画
单击另一个按钮时其他按钮的动画
按钮点击后的描边图层效果
当使用CSS动画或过渡来连接元素时，将使用translate3d属性。 这种方式会大大降低用户体验，但对浏览器的性能要求会增强。
@keyframes fx-el_topleft-active {
0% {}
16% { transform: translate3d(-27.5%, -27.5%, 0); }
50% { transform: translate3d(55.1%, 55.1%, 0) scale(1); color: #FFF;}
62% { color: transparent; }
100% { transform: translate3d(55.1%, 55.1%, 0) scale(20); color: transparent; }
}
@keyframes fx-el_topright-active {
0% {}
16% { transform: translate3d(27.5%, -27.5%, 0); }
50% { transform: translate3d(-55.1%, 55.1%, 0) scale(1); color: #FFF;}
62% { color: transparent; }
100% { transform: translate3d(-55.1%, 55.1%, 0) scale(20); color: transparent; }
}
@keyframes fx-el_btmleft-active {
0% {}
16% { transform: translate3d(-27.5%, 27.5%, 0); }
50% { transform: translate3d(55.1%, -55.1%, 0) scale(1); color: #FFF;}
62% { color: transparent; }
100% { transform: translate3d(55.1%, -55.1%, 0) scale(20); color: transparent;}
}
@keyframes fx-el_btmright-active {
0% {}
16% { transform: translate3d(27.5%, 27.5%, 0); }
50% { transform: translate3d(-55.1%, -55.1%, 0) scale(1); color: #FFF;}
62% { color: transparent; }
100% { transform: translate3d(-55.1%, -55.1%, 0) scale(20); color: transparent; }
}
#el-topleft.active {
animation: fx-el_topleft-active 1.6s 1 ease-in-out;
}
#el-topright.active {
animation: fx-el_topright-active 1.6s 1 ease-in-out;
}
#el-btmleft.active {
animation: fx-el_btmleft-active 1.6s 1 ease-in-out;
}
#el-btmright.active {
animation: fx-el_btmright-active 1.6s 1 ease-in-out;
}
下面是按钮未被点击的动画。 它们以相同的方式连接并最终隐藏（不透明度：0）。
@keyframes fx-el_topleft-inactive {
0% {
transform: translate3d(0%, 0%, 0);
opacity: 1;
}
16% {
transform: translate3d(-27.5%, -27.5%, 0);
opacity: 1;
}
40% {
opacity: 0;
}
50% {
transform: translate3d(55.1%, 55.1%, 0);
}
100% {
transform: translate3d(55.1%, 55.1%, 0);
opacity: 0;
}
}
@keyframes fx-el_topright-inactive {
0% {
transform: translate3d(0%, 0%, 0);
opacity: 1;
}
16% {
transform: translate3d(27.5%, -27.5%, 0);
opacity: 1;
}
40% {
opacity: 0;
}
50% {
transform: translate3d(-55.1%, 55.1%, 0);
}
100% {
transform: translate3d(-55.1%, 55.1%, 0);
opacity: 0;
}
}
@keyframes fx-el_btmleft-inactive {
0% {
transform: translate3d(0%, 0%, 0);
opacity: 1;
}
16% {
transform: translate3d(-27.5%, 27.5%, 0);
opacity: 1;
}
40% {
opacity: 0;
}
50% {
transform: translate3d(55.1%, -55.1%, 0);
}
100% {
transform: translate3d(55.1%, -55.1%, 0);
opacity: 0;
}
}
@keyframes fx-el_btmright-inactive {
0% {
transform: translate3d(0%, 0%, 0);
opacity: 1;
}
16% {
transform: translate3d(27.5%, 27.5%, 0);
opacity: 1;
}
40% {
opacity: 0;
}
50% {
transform: translate3d(-55.1%, -55.1%, 0);
}
100% {
transform: translate3d(-55.1%, -55.1%, 0);
opacity: 0;
}
}
#el-topleft.inactive {
animation: fx-el_topleft-inactive 1.6s 1 ease-in-out;
}
#el-topright.inactive {
animation: fx-el_topright-inactive 1.6s 1 ease-in-out;
}
#el-btmleft.inactive {
animation: fx-el_btmleft-inactive 1.6s 1 ease-in-out;
}
#el-btmright.inactive {
animation: fx-el_btmright-inactive 1.6s 1 ease-in-out;
}
接下来是描边层的动画效果，代码很容易理解。
@keyframes fx-overlay {
0% { visibility: visible; color: transparent; }
50% { background-color: #107360; color: white; }
100% { visibility: visible; background-color: #107360; color: #FFF; }
}
.overlay.active {
animation: fx-overlay .8s 1.25s 1 ease-in-out forwards;
}
遮罩层的动画延迟时间为1.25秒，这会导致按钮动画结束后才显示描边层的内容。 forwards属性指定动画结束的时间值，这里表示保存的遮罩层仍然可见。
Active_reverse状态
当用户单击笔划层上的关闭按钮时css3过渡效果，此状态用于反转动画：遮罩消失并且按钮返回到其原始位置。
@keyframes fx-el_topleft-active_reverse {
0% { transform: translate3d(55.1%, 55.1%, 0) scale(20);
color: transparent; background-color: #107360; }
38% { color: transparent;}
50% { transform: translate3d(55.1%, 55.1%, 0) scale(1); color: #FFF; background-color: #107360; }
82% { transform: translate3d(-27.5%, -27.5%, 0); background-color: #16a085;}
100% { transform: translate3d(0%, 0%, 0); }
}
@keyframes fx-el_topright-active_reverse {
0% { transform: translate3d(-55.1%, 55.1%, 0) scale(20);
color: transparent; background-color: #107360; }
38% { color: transparent; }
50% { transform: translate3d(-55.1%, 55.1%, 0) scale(1); color: #FFF; background-color: #107360;}
82% { transform: translate3d(27.5%, -27.5%, 0); background-color: #16a085;}
100% { transform: translate3d(0%, 0%, 0); }
}
###解答1：动画和过渡都是CSS3中的动画效果，但是它们的实现形式和功能不同。 过渡是指元素从一种状态过渡到另一种状态时添加过渡效果，使过渡更加平滑。 例如，当鼠标悬停在按钮上时，按钮的背景颜色从蓝色变为红色，可以使用过渡来实现这些效果。 动画是指给元素添加动画效果，使元素在一段时间内能够发生复杂的动画变化。 例如，您可以使用动画来实现旋转加载动画。 一般来说，transition适合简单的状态转换，而animation适合复杂的动画效果。 ###解答2：Animation和Transition都是CSS中用来实现动画效果的属性，它们的实现方法和使用场景有所不同。 首先，Animation是一种比Transition更复杂、更灵活的动画实现方式。 它通过定义一系列关键帧来实现动画效果，并且可以自定义动画的开始状态、结束状态、中间过渡状态css3 动画效果，还可以设置动画的持续时间、缓动函数、延迟时间。 Animation属性可以应用于元素的任意属性，如颜色、大小、位置等，可以实现更加复杂、多样化的动画效果。
而Transition则变得更加简单直观，通过指定元素属性变化的transition的时间和方法来实现动画效果。 它只能作用于特定的属性，如颜色、大小、位置等。Transition属性只需要指定过渡时间和缓动函数，无需定义关键帧，所以相比Animation，Transition的实现方法更加简单、更多direct，适用于简单的过渡效果，例如键盘悬停和单击触发的过渡效果。 动漫疗效。 综上所述，Animation适合比较复杂多变的动画效果，可以自定义关键帧和过渡状态css3 动画效果，而Transition适合简单的属性变化过渡效果。 Animation的实现方式更加灵活复杂，而Transition则更加简单直观。 具体使用哪个属性要根据动画效果和需要实现的元素的特点来确定。 ###答案3：动画和过渡是两种不同的视觉效果，用于使元素在页面上动态变化。 动画用于创建连续的运动效果，可以实现元素的平滑连接、旋转、缩放等。通过设置动画关键帧和动画时长，我们可以控制动画的整个过程。 动画一般包含多个关键帧，根据关键帧之间的Tween Animation可以达到平滑过渡的效果。 动画可以在元素的任何状态下开始和结束，但可以重复或反向播放。
过渡是元素在不同状态之间的平滑过渡效果。 它通过在不同状态之间插入中间帧来实现元素的渐变、位移、透明度等变化。 转换通常在元素从一种状态转换到另一种状态时触发，但定义状态之间每次转换的持续时间和样式。 过渡的效果是元素平滑、渐变的变化，让用户在界面切换时感觉更加自然、流畅。 综上所述，动画和过渡都是用来创建元素的动态效果，但动画是指元素的不断移动和变化，而过渡是指元素状态之间的平滑过渡效果。 在实际应用中，我们可以根据自己的需要选择使用动画或者过渡来实现不同的视觉效果。
