一起领略css3动画的强大

CSS3的确出了不少高大上的功能,3D效果/动画/多列等等;今天写篇文章记录怎么一下怎么用CSS3写一个动画;不过还是要提醒大家:IE9及以下版本不支持CSS3动画(需要可以考虑用js,不过估计效果不好);chrome和safafi建议加上前缀-webkit-以向前兼容老版本

CSS3动画相关的几个属性是:transition/transform/animation,我分别理解为过渡/变换/动画;虽意义相近,但具体角色不一

transition指过渡,就是从a点都b点,就像过江坐渡轮,是有时间的/连续的,一般针对常规CSS属性;transform指变换,就那几个固定的属性,例如:旋转/缩放/偏移等,可独立于transition使用;但效果就是很干涩机械的旋转移动,要是配合transition属性就会很平滑;animation最先安家于Safari浏览器,与transition和transform有老死不相往来之感,但是要说单挑的话,个人认为animation要比transition厉害些

transition

CSS3中新增加了一个新的模块transition,它可以通过一些简单的CSS事件来触发元素的外观变化,让效果显得更加细腻;W3C标准中对css3的transition这是样描述的:"css的transition允许css的属性值在一定的时间区间内平滑地过渡,这种效果可以在鼠标单击/获得焦点/被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值";下面我们从其语法和属性值开始一步一步来学习transition的具体使用

在CSS中创建简单的过渡效果可以从以下几个步骤来实现:

1.在默认样式中声明元素的初始状态样式

2.声明过渡元素最终状态样式,比如悬浮状态

3.在默认样式中通过添加过渡函数添加一些不同的样式

语法:

transition:[<'transition-property'>||<'transition-duration'>||<'transition-timing-function'>||<'transition-delay'>[,[<'transition-property'>||<'transition-duration'>||<'transition-timing-function'>||<'transition-delay'>]]

transition主要包含四个属性值:

transition-property:指定过渡或动态模拟的CSS属性;transition-duration:指定完成过渡所需的时间;transition-timing-function:指定过渡函数;transition-delay:指定过渡开始出现的延迟时间;这四个属性中只有是必需值且不能为0

transition-property

transition-property用来指定过渡动画的CSS属性名称,而这个过渡属性只有具备一个中点值的属性(需要产生动画的属性)才能具备过渡效果

语法:

transition-property ： none | all | [ <IDENT> ] [ ',' <IDENT> ]

transition-property是用来指定当元素其中一个属性改变时执行transition效果,其主要有以下几个值:none(没有属性改变),all(所有属性改变)这个也是其默认值,indent(元素属性名);当其值为none时transition马上停止执行,当指定为all时则元素产生任何属性值变化时都将执行transition效果,ident是可以指定元素的某一个属性值;其对应的属性如下:

用一个简单的例子来说明all:

假设初始状态设置了样式width/height/background,当你在终始状态都改变了这三个属性,那么all代表的就是width/height/background,如果你的终始状态只改变了width/height,那么all代表的就是width/height

transition-duration

语法:

transition-duration ： <time> [, <time>]

transition-duration用来指定元素转换过程的持续时间,取值:为数值,单位为s(秒)或ms(毫秒),可以作用于所有元素,包括:before和:after伪元素;其默认值是0,也就是变换是即时的

transition-timing-function

transition-timing-function属性指的是过渡的"缓动函数",主要用来指定浏览器的过渡速度,以及过渡期间的操作进展情况,其中要包括以下几种函数:

取值

过渡时间函数共三种取值,分别是关键字/steps函数/bezier函数

steps函数

steps步进函数将过渡时间划分成大小相等的时间时隔来运行

steps(<integer>[,start | end]?)

:用来指定间隔个数(该值只能是正整数)

第二个参数:该参数可选,默认是end,表示开始值保持一次;若参数为start,表示开始不保持

语法:

 transition-timing-function:ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier(<number>,<number>,<number>,<number>)[,ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier(<number>,<number>,<number>,<number>)]

transition-timing-function的值允许你根据时间的推进去改变属性值的变换速率,有6个可能值:

属性名	属性值
ease	默认值,元素样式从初始状态过渡到终止状态速度由快到慢,逐渐变慢
linear	元素样式从初始状态过渡到终止状态速度是恒速
ease-in	元素样式从初始状态过渡到终止状态时,速度越来越快,呈一种加速状态;常称这种效果为渐显效果
ease-out	元素样式从初始状态过渡到终止状态时,速度越来越慢,呈一种减速状态;常称这种效果为渐隐效果
ease-in-out	元素样式从初始状态过渡到终止状态时,先加速再减速;常称这种效果为渐显渐隐效果
cubic-bezier	该值允许你去自定义一个时间曲线,特定的cubic-bezier曲线;(x1,y1,x2,y2)四个值特定于曲线上点P1和点P2,所有值需在[0,1]区域内,否则无效

举例:

<style>
.test{height: 100px; width: 100px; background-color: pink; transition-duration: 3s;/* 以下三值为默认值 */transition-property: all; transition-timing-function: ease; transition-delay: 0s;
}
.test:hover{width: 500px;
}
</style>
<div></div>

transition-delay

语法:

transition-delay ： <time> [, <time>]

transition-delay是用来指定一个动画开始执行的时间,也就是说当改变元素属性值后多长时间开始执行transition效果,其取值:为数值,单位为s(秒)ms(毫秒),其使用和transition-duration极其相似,也可以作用于所有元素,包括:before和:after伪元素;默认大小是0,也就是变换立即执行,没有延迟

有时我们不只改变一个css效果的属性,而是想改变两个或者多个css属性的transition效果，那么我们只要把几个transition的声明串在一起,用逗号（','）隔开,然后各自可以有各自不同的延续时间和其时间的速率变换方式;但需要值得注意的一点:transition-delay与transition-duration的值都是时间,所以要区分它们在连写中的位置,一般浏览器会根据先后顺序决定,第一个可以解析为时间的怭值为transition-duration第二个为transition-delay

 a {-moz-transition: background 0.5s ease-in,color 0.3s ease-out;-webkit-transition: background 0.5s ease-in,color 0.3s ease-out;-o-transition: background 0.5s ease-in,color 0.3s ease-out;transition: background 0.5s ease-in,color 0.3s ease-out;
}

如果想给元素执行所有transition效果的属性,还可以利用all属性值来操作,此时他们共享同样的延续时间以及速率变换方式

 a {-moz-transition: all 0.5s ease-in; -webkit-transition: all 0.5s ease-in; -o-transition: all 0.5s ease-in; transition: all 0.5s ease-in;
}

综合上述我们可以给transition一个速记法:transition:<property><duration><animation type><delay>,相对应的一个示例代码

p {-webkit-transition: all .5s ease-in-out 1s; //Webkit内核-o-transition: all .5s ease-in-out 1s; //Opera-moz-transition: all .5s ease-in-out 1s; //Mozilla内核transition: all .5s ease-in-out 1s; //W3C 标准
}

浏览器的兼容性

为了避免兼容性,在应用transition时我们有必要加上各自的前缀,最好再放上我们W3C的标准写法,这样只要浏览器支持我们的transition属性,那么这种效果就会自动加上去

transform

Transform字面上就是变形/改变的意思,在CSS3中transform属性实现了一些可用SVG实现的功能,它可用于内联(inline)元素和块级(block)元素;transform主要包括以下几种:旋转rotate/扭曲skew/缩放scale/移动translate/矩阵变形matrix;下面我们一起来看看CSS3中transform的各个动画具体如何实现

transform ： none | <transform-function> [ <transform-function> ]
也就是：
transform: rotate | scale | skew | translate |matrix;

none表示不进行变换;表示一个或多个变换函数,以空格分开,即我们同时对一个元素进行transform的多种属性操作,例如rotate/scale/translate三种,但以往我们叠加效果都是用逗号(,)隔开,但transform中使用多个属性时却需要有空格隔开

旋转rotate

rotate():通过指定的角度参数对原元素指定一个2D rotation(2D旋转),需先有transform-origin属性的定义;transform-origin定义的是旋转的基点,其中angle是指旋转角度,如果设置的值为正数表示顺时针旋转,如果设置的值为负数则表示逆时针旋转;如:transform:rotate(30deg)

<style>
#current
{width:200px;height:100px;color:white;background-color: #3EDFF4;text-align:center;transform-origin:20px 20px;  /* 改变基点 */-webkit-transform-origin:20px 20px;-moz-transform-origin:20px 20px;transform:rotate(30deg);-webkit-transform:rotate(30deg);  /*兼容-webkit-引擎浏览器*/-moz-transform:rotate(30deg);     /*兼容-moz-引擎浏览器*/
}
</style>
<div id="current"></div>

移动translate

移动translate我们分为三种情况:translate(x,y)水平方向和垂直方向同时移动(也就是X轴和Y轴同时移动);translateX(x)仅水平方向移动(X轴移动);translateY(Y)仅垂直方向移动(Y轴移动)

translate([, ])

通过矢量[tx,ty]指定一个2D translation,tx是第一个过渡值参数,ty是第二个过渡值参数选项;如果未被提供,则ty以0作为其值,也就是translate(x,y):表示对象按照设定的x,y参数值进行平移,当值为负数时反方向移动物体,其基点默认为元素中心点,也可以根据transform-origin进行改变基点;如transform:translate(100px,20px)

<style>
#current
{width:200px;height:100px;color:white;background-color: #3EDFF4;text-align:center;transform:translate(20px,20px);-webkit-transform:translate(20px,20px);  /*兼容-webkit-引擎浏览器*/-moz-transform:translate(20px,20px);     /*兼容-moz-引擎浏览器*/
}
</style>
<div id="current"></div>

translateX()

通过给定一个X方向上的数值指定一个translation,只向x轴进行移动元素,同样其基点是元素中心点,也可以根据transform-origin改变基点位置;如:transform:translateX(100px)

translateY()

通过给定Y方向的数目指定一个translation,只向Y轴进行移动,基点在元素心点,可以通过transform-origin改变基点位置;如:transform:translateY(20px)

缩放scale

缩放scale和移动translate极其相似,他也具有三种情况:scale(x,y):使元素水平方向和垂直方向同时缩放(也就是X轴和Y轴同时缩放),scaleX(x):元素仅水平方向缩放(X轴缩放),scaleY(y):元素仅垂直方向缩放(Y轴缩放),但它们具有相同的缩放中心点和基数,其中心点就是元素的中心位置,缩放基数为1,如果其值大于1元素就放大,反之其值小于1元素缩小

scale([, ])

提供执行[sx,sy]缩放矢量的两个参数指定一个2D scale(2D缩放);如果第二个参数未提供则取与第一个参数一样的值,scale(X,Y)是用于对元素进行缩放,可以通过transform-origin对元素的基点进行设置,同样基点在元素中心位置;其中X表示水平方向缩放的倍数,Y表示垂直方向的缩放倍数,而Y是一个可选参数,如果没有设置Y值则表示X/Y两个方向的缩放倍数是一样的,并以X为准;如:transform:scale(2,1.5)

<style>
#current
{width:200px;height:100px;color:white;background-color: #3EDFF4;text-align:center;transform:translate(20px,20px);-webkit-transform:translate(20px,20px);  /*兼容-webkit-引擎浏览器*/-moz-transform:translate(20px,20px);     /*兼容-moz-引擎浏览器*/
}
</style>
<div id="current"></div>

scaleX()

使用[sx,1]缩放矢量执行缩放操作,sx为所需参数;scaleX表示元素只在X轴(水平方向)缩放元素,他的默认值是(1,1),其基点一样是在元素的中心位置,我们同样是通过transform-origin来改变元素的基点;如:transform:scaleX(2)

scaleY()

使用[1,sy] 缩放矢量执行缩放操作,sy为所需参数;scaleY表示元素只在Y轴(垂直方向)缩放元素,其基点同样是在元素中心位置,可以通过transform-origin来改变元素的基点;如:transform:scaleY(2)

扭曲skew

扭曲skew和translate/scale一样同样具有三种情况:skew(x,y)使元素在水平和垂直方向同时扭曲(X轴和Y轴同时按一定的角度值进行扭曲变形),skewX(x)仅使元素在水平方向扭曲变形(X轴扭曲变形),skewY(y)仅使元素在垂直方向扭曲变形(Y轴扭曲变形)

skew( [, ])

X轴Y轴上的skew transformation(斜切变换);第一个参数对应X轴,第二个参数对应Y轴;如果第二个参数未提供,则值为0,也就是Y轴方向上无斜切;skew是用来对元素进行扭曲变形,第一个参数是水平方向扭曲角度,第二个参数是垂直方向扭曲角度;其中第二个参数是可选参数,如果没有设置第二个参数,那么Y轴为0deg;同样是以元素中心为基点,我们也可以通过transform-origin来改变元素的基点位置;如:transform:skew(30deg,10deg)

<style>
#current
{width:200px;height:100px;color:white;background-color: #3EDFF4;text-align:center;transform:skew(30deg,10deg);-webkit-transform:skew(30deg,10deg);  /*兼容-webkit-引擎浏览器*/-moz-transform:skew(30deg,10deg);    /*兼容-moz-引擎浏览器*/
}
</style>
<div id="current"></div>

skewX()

按给定的角度沿X轴指定一个skew transformation(斜切变换);skewX是使元素以其中心为基点,并在水平方向(X轴)进行扭曲变形,同样可以通过transform-origin来改变元素的基点;如:transform:skewX(30deg)

矩阵matrix

matrix(,,,,,):以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换,相当于直接应用一个[a b c d e f]变换矩阵;就是基于水平方向(X轴)和垂直方向(Y轴)重新定位元素;此属性值使用涉及到数学中的矩阵,在这里只是简单的说一下CSS3中的transform有这么一个属性值,如果有感兴趣的朋友可以去了解更深层次的martix使用方法

改变元素基点transform-origin

前面我们多次提到transform-origin这个东东,他的主要作用就是让我们在进行transform动作之前可以改变元素的基点位置,因为我们元素默认基点就是其中心位置;换句话说我们没有使用transform-origin改变元素基点位置的情况下,transform进行的rotate/translate/scale/skew/matrix等操作都是以元素自己中心位置进行变化的,但有时候我们需要在不同的位置对元素进行这些操作,那么我们就可以使用transform-origin使元素基点不在是中心位置,以达到你需要的基点位置;下面我们主要来看看其使用规则

transform-origin(X,Y):用来设置元素的运动的基点(参照点),默认点是元素的中心点,其中X和Y的值可以是百分值/em/px,其中X也可以是字符参数值left/center/right,Y和X一样除了百分值外还可以设置字符值top/center/bottom,这个看上去有点像我们background-position设置一样,下面我列出他们相对应的写法:

属性值	属性含义
top left / left top	等价于 0 0 / 0% 0%
top / top center / center top	等价于 50% 0
right top / top right	等价于 100% 0
left / left center / center left	等价于 0 50% / 0% 50%
center / center center	等价于 50% 50% (默认值)
right / right center / center right	等价于 100% 50%
bottom left / left bottom	等价于 0 100% / 0% 100%
bottom / bottom center / center bottom	等价于 50% 100%
bottom right	right bottom	等价于 100% 100%

其中left/center/right是水平方向取值,对应的百分值为left=0%/center=50%/right=100%,而top/center/bottom是垂直方向的取值,其中top=0%/center=50%/bottom=100%;如果只取一个值,表示垂直方向值不变

更多改变中心基点的办法,大家可以在本地多体会,这里还要提醒的是:transform-origin并不是transform中的属性值,他具有自己的语法,而且transform-origin跟其他的css3属性一样需要在不同的浏览内核中加上相应的前缀,下面列出各种浏览器内核下的语法规则:

  -moz-transform-origin: x y; //Mozilla内核浏览器：firefox3.5+  -webkit-transform-origin: x y; //Webkit内核浏览器：Safari and Chrome  -o-transform-origin: x y ; //Opera  -ms-transform-origin: x y; //IE9  transform-origin: x y ; //W3C标准

transform在不同浏览器内核下的书写规则

  -moz-transform: rotate | scale | skew | translate ; //Mozilla内核浏览器：firefox3.5+ -webkit-transform: rotate | scale | skew | translate ; //Webkit内核浏览器：Safari and Chrome -o-transform: rotate | scale | skew | translate ; //Opera -ms-transform: rotate | scale | skew | translate ; //IE9 transform: rotate | scale | skew | translate ; //W3C标准

同样的transform在IE9下版本是无法兼容的

举个同时使用多个属性的例子

<style type="text/css">      #current{width:200px;height:100px;color:white;background-color: #3EDFF4;text-align:center;transition:1s;}#current:hover{transform:scale(0.5,1) rotate(30deg);}
</style>
<div id="current"></div>

Animation

我们一起学习完了Transform和Transition,让我们对元素实现了一些基本的动画效果,这些我想足以让大家激动了一阵子,现在我们趁着这个热劲继续第三个动画属性Animation的学习;单从Animation字面上的意思,我们就知道是"动画",但CSS3中的Animation与HTML5中的Canvas绘制动画又不同,Animation只应用在页面上已存在的DOM元素上,而且他跟Flash/JavaScript/jQuery制作出来的动画效果又不一样,因为我们使用CSS3的Animation制作动画可以省去复杂的js/jquery代码

在开始介绍Animation之前我们有必要先来了解一个特殊的东西,那就是"Keyframes",我们把他叫做"关键帧";前面我们在使用transition制作一个简单的transition效果时,包括了初始属性和最终属性,一个开始执行动作时间和一个延续动作时间以及动作的变换速率,其实这些值都是一个中间值;如果我们要控制的更细一些,比如说我要第一个时间段执行什么动作,第二个时间段执行什么动作,用Transition就很难实现了,此时我们也需要这样的一个"关键帧"来控制;那么CSS3的Animation就是由"Keyframes"这个属性来实现这样的效果

Keyframes具有自己的语法规则,他的命名是由"@keyframes"开头,后面紧接着是这个"动画名称"加上一对花括号"{}",括号中就是一些不同时间段样式规则,有点像我们css的样式写法;一个"@keyframes"中的样式规则是由多个百分比构成的,如"0%"到"100%"之间,我们可以在这个规则中创建多个百分比,分别在每个百分比中给需要有动画效果的元素加上不同的属性,从而让元素达到一种不断变化的效果,比如移动/改变元素颜色/位置/大小/形状等;不过有一点需要注意的是,我们可以使用"fromt"/"to"来代表一个动画是从哪开始/到哪结束,也就是说"from"就相当于"0%"而"to"相当于"100%";值得一说的是,其中"0%"不能像别的属性取值一样把百分比符号省略,我们在这里必须加上百分符号;如果没有加上的话,我们这个keyframes是无效的,不起任何作用;因为keyframes的单位只接受百分比值

Keyframes语法

 @keyframes IDENT {from {Properties:Properties value;}Percentage {Properties:Properties value;}to {Properties:Properties value;}
}
或者全部写成百分比的形式：
@keyframes IDENT {0% {Properties:Properties value;}Percentage {Properties:Properties value;}100% {Properties:Properties value;}
}

其中IDENT是一个动画名称,可以随便取,当然语义化一点更好;Percentage是百分比值,我们可以添加许多个这样的百分比,Properties为css的属性名,比如说left/background等,value就是相对应的属性的属性值

@keyframes 'wobble' {0% {margin-left: 100px;background: green;}40% {margin-left: 150px;background: orange;}60% {margin-left: 75px;background: blue;}100% {margin-left: 100px;background: red;}
}
@-webkit-keyframes 'wobble' {0% {margin-left: 100px;background: green;}40% {margin-left: 150px;background: orange;}60% {margin-left: 75px;background: blue;}100% {margin-left: 100px;background: red;}
}

这里我们定义了一个叫"wobble"的动画,从0%开始到100%时结束,从中还经历了一个40%和60%两个过程,上面代码具体意思是:wobble动画在0%时元素定位到left为100px的位置背景色为green,然后40%时元素过渡到left为150px的位置并且背景色为orange,60%时元素过渡到left为75px的位置背景色为blue,最后100%结束动画的位置元素又回到起点left为100px处背景色变成red

Keyframes定义好后,我们需要怎么去调用刚才定义好的动画"wobble"?

CSS3的animation类似于transition属性,他们都是随着时间改变元素的属性值;他们主要区别是:transition需要触发一个事件(hover/click等)才会随时间改变其css属性,而animation不需要触发任何事件的情况也可以显式的随着时间变化来改变元素css的属性值,从而达到一种动画的效果,这样我们就可以直接在一个元素中调用animation的动画属性;基于这一点,css3的animation就需要明确的动画属性值,这也就回到我们上面所说的,我们需要keyframes来定义不同时间的css属性值,达到元素在不同时间段变化的效果

.demo1 {width: 50px;height: 50px;margin-left: 100px;background: blue;-webkit-animation-name:'wobble';/*动画属性名，也就是我们前面keyframes定义的动画名*/-webkit-animation-duration: 10s;/*动画持续时间*/-webkit-animation-timing-function: ease-in-out; /*动画频率，和transition-timing-function是一样的*/-webkit-animation-delay: 2s;/*动画延迟时间*/-webkit-animation-iteration-count: 10;/*定义循环资料，infinite为无限次*/-webkit-animation-direction: alternate;/*定义动画方式*/
}

animation-name - 设置动画名

主要是用来调用@keyframes定义好的动画;animation-name调用的动画名需要和"@keyframes"定义的动画名称完全一致(区分大小写),如果不一致将不具有任何动画效果

animation-name: none / IDENT

IDENT是由@keyframes创建的动画名,我们可以同时附几个animation给一个元素,只需要用逗号隔开;none为默认值,当值为none时将没有任何动画效果,这可以用于覆盖任何动画

注意：需要在Chrome和Safari上面的基础上加上-webkit-前缀,Firefox加上-moz-

animation-duration - 设置动画播放时间

主要用来设置CSS3动画播放时间,其使用方法和transition-duration类似,是用来指定元素播放动画所持续的时间长,也就是完成从0%到100%一次动画所需时间;单位:S秒

animation-duration: <time>

取值为数值,单位为秒,其默认值为0,这意味着动画周期为0,也就是没有动画效果(如果值为负值会被视为0)

animation-timing-function - 设置动画播放方式

主要让元素根据时间的推进来改变属性值的变换速率，简单点说就是动画的播放方式

animation-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)

它和transition中的transition-timing-function一样,具有以下几种变换方式:ease,ease-in,ease-in-out,ease-out,linear和cubic-bezier

animation-delay - 设置动画开始播放的时间

用来触发动画播放的时间点,和transition-delay属性一样,用于定义在浏览器开始执行动画之前等待的时间

animation-delay:<time>

制作一个矩形变成圆形的动画,浏览器渲染样式之后1S之后触发toradius动画,整个动画播放时间持续了10s钟

<div>Hover Me</div>
<style>
@keyframes toradius{from {border-radius: 0;}to {border-radius: 100%;}
}
div {width: 200px;height: 200px;line-height: 200px;text-align: center;color: #fff;background: green;margin: 20px auto;
}
div:hover {animation-name: toradius;animation-duration: 10s;animation-timing-function: ease-in-out;animation-delay: .1s;
}
</style>

animation-iteration-count - 定义动画的播放次数

animation-iteration-count: infinite | <number>

其值通常为整数,但也可以使用带有小数的数字,其默认值为1,意味着动画将从开始到结束只播放一次;如果取值为infinite,动画将会无限次的播放

注意:Chrome或Safari浏览器,需要加入-webkit-前缀

animation-direction - 设置动画播放方向

animation-direction:normal | alternate

其主要有两个值:normal/alternate;如果设置为normal(默认值),动画的每次循环都是向前播放;另一个值是alternate,它的作用是动画播放在第偶数次向前播放,第奇数次向反方向播放

注意:Chrome或Safari浏览器,需要加入-webkit-前缀

animation-play-state - 控制元素动画的播放状态

animation-play-state:running | paused

其参数主要有两个值:running和paused,主要作用就是类似于音乐播放器一样;通过paused将正在播放的动画停下来,也可以通过running(默认值)将暂停的动画重新播放;这里的重新播放不一定是从元素动画的开始播放,而是从暂停的那个位置开始播放;另外如果暂停了动画的播放,元素的样式将回到最原始设置状态;例如:页面加载时动画不播放,代码如下：

animation-play-state:paused;

animation-fill-mode - 设置动画时间外属性

animation-fill-mode属性定义在动画开始之前和结束之后发生的操作,主要具有四个属性值:none/forwards/backwords/both;其四个属性值对应效果如下:

属性值	效果
none	默认值,表示动画将按预期进行和结束,在动画完成其最后一帧时,动画会反转到初始帧处
forwards	表示动画在结束后继续应用最后的关键帧的位置
backwards	会在向元素应用动画样式时迅速应用动画的初始帧
both	元素动画同时具有forwards和backwards效果

默认情况下,动画不会影响它关键帧之外的属性,使用animation-fill-mode属性可以修改动画的默认行为;简单的说就是告诉动画在第一关键帧上等待动画开始,或者在动画结束时停在最后一个关键帧上而不回到动画的第一帧上,或者同时具有这两个效果

例如:让动画停在最后一帧处,代码如下:

animation-fill-mode:forwards;

常用动画总结

淡入

@-webkit-keyframes fadein{0%{opacity:0;}100%{opacity:1;}
}
@-moz-keyframes fadein{0%{opacity:0;}100%{opacity:1;}
}
@-ms-keyframes fadein{0%{opacity:0;}100%{opacity:1;}
}
@keyframes fadein{0%{opacity:0;}100%{opacity:1;}
}

淡入-从上

@-webkit-keyframes fadeinT{0%{opacity:0;-webkit-transform:translateY(-100px);}100%{opacity:1;-webkit-transform:translateY(0);}
}
@-moz-keyframes fadeinT{0%{opacity:0;-moz-transform:translateY(-100px);}100%{opacity:1;-moz-transform:translateY(0);}
}
@-ms-keyframes fadeinT{0%{opacity:0;-ms-transform:translateY(-100px);}100%{opacity:1;-ms-transform:translateY(0);}
}
@keyframes fadeinT{0%{opacity:0;transform:translateY(-100px);}100%{opacity:1;transform:translateY(0);}
}

淡入-从右

@-webkit-keyframes fadeinR{0%{opacity:0;-webkit-transform:translateX(100px);}100%{opacity:1;-webkit-transform:translateX(0);}
}
@-moz-keyframes fadeinR{0%{opacity:0;-moz-transform:translateX(100px);}100%{opacity:1;-moz-transform:translateX(0);}
}
@-ms-keyframes fadeinR{0%{opacity:0;-ms-transform:translateX(100px);}100%{opacity:1;-ms-transform:translateX(0);}
}
@keyframes fadeinR{0%{opacity:0;transform:translateX(100px);}100%{opacity:1;transform:translateX(0);}
}

淡入-从下

@-webkit-keyframes fadeinB{0%{opacity:0;-webkit-transform:translateY(100px);}100%{opacity:1;-webkit-transform:translateY(0);}
}
@-moz-keyframes fadeinB{0%{opacity:0;-moz-transform:translateY(100px);}100%{opacity:1;-moz-transform:translateY(0);}
}
@-ms-keyframes fadeinB{0%{opacity:0;-ms-transform:translateY(100px);}100%{opacity:1;-ms-transform:translateY(0);}
}
@keyframes fadeinB{0%{opacity:0;transform:translateY(100px);}100%{opacity:1;transform:translateY(0);}
}

淡入-从左

@-webkit-keyframes fadeinL{0%{opacity:0;-webkit-transform:translateX(-100px);}100%{opacity:1;-webkit-transform:translateX(0);}
}
@-moz-keyframes fadeinL{0%{opacity:0;-moz-transform:translateX(-100px);}100%{opacity:1;-moz-transform:translateX(0);}
}
@-ms-keyframes fadeinL{0%{opacity:0;-ms-transform:translateX(-100px);}100%{opacity:1;-ms-transform:translateX(0);}
}
@keyframes fadeinL{0%{opacity:0;transform:translateX(-100px);}100%{opacity:1;transform:translateX(0);}
}

淡出

@-webkit-keyframes fadeout{0%{opacity:1;}100%{opacity:0;}
}
@-moz-keyframes fadeout{0%{opacity:1;}100%{opacity:0;}
}
@-ms-keyframes fadeout{0%{opacity:1;}100%{opacity:0;}
}
@keyframes fadeout{0%{opacity:1;}100%{opacity:0;}
}

淡出-向右

@-webkit-keyframes fadeoutR{0%{opacity:1;-webkit-transform:translateX(0);}100%{opacity:0;-webkit-transform:translateX(100px);}
}
@-moz-keyframes fadeoutR{0%{opacity:1;-moz-transform:translateX(0);}100%{opacity:0;-moz-transform:translateX(100px);}
}
@-ms-keyframes fadeoutR{0%{opacity:1;-ms-transform:translateX(0);}100%{opacity:0;-ms-transform:translateX(100px);}
}
@keyframes fadeoutR{0%{opacity:1;transform:translateX(0);}100%{opacity:0;transform:translateX(100px);}
}

淡出-向下

@-webkit-keyframes fadeoutB{0%{opacity:1;-webkit-transform:translateY(0);}100%{opacity:0;-webkit-transform:translateY(100px);}
}
@-moz-keyframes fadeoutB{0%{opacity:1;-moz-transform:translateY(0);}100%{opacity:0;-moz-transform:translateY(100px);}
}
@-ms-keyframes fadeoutB{0%{opacity:1;-ms-transform:translateY(0);}100%{opacity:0;-ms-transform:translateY(100px);}
}
@keyframes fadeoutB{0%{opacity:1;transform:translateY(0);}100%{opacity:0;transform:translateY(100px);}
}

淡出-向左

@-webkit-keyframes fadeoutL{0%{opacity:1;-webkit-transform:translateX(0);}100%{opacity:0;-webkit-transform:translateX(-100px);}
}
@-moz-keyframes fadeoutL{0%{opacity:1;-moz-transform:translateX(0);}100%{opacity:0;-moz-transform:translateX(-100px);}
}
@-ms-keyframes fadeoutL{0%{opacity:1;-ms-transform:translateX(0);}100%{opacity:0;-ms-transform:translateX(-100px);}
}
@keyframes fadeoutL{0%{opacity:1;transform:translateX(0);}100%{opacity:0;transform:translateX(-100px);}
}

弹跳

@-webkit-keyframes bounce{0%,20%,50%,80%,100%{-webkit-transform:translateY(0);}40%{-webkit-transform:translateY(-30px);}60%{-webkit-transform:translateY(-15px);}
}
@-moz-keyframes bounce{0%,20%,50%,80%,100%{-moz-transform:translateY(0);}40%{-moz-transform:translateY(-30px);}60%{-moz-transform:translateY(-15px);}
}
@-ms-keyframes bounce{0%,20%,50%,80%,100%{-ms-transform:translateY(0);}40%{-ms-transform:translateY(-30px);}60%{-ms-transform:translateY(-15px);}
}
@keyframes bounce{0%,20%,50%,80%,100%{transform:translateY(0);}40%{transform:translateY(-30px);}60%{transform:translateY(-15px);}
}

弹入

@-webkit-keyframes bouncein{0%{opacity:0;-webkit-transform:scale(0.3);}50%{opacity:1;-webkit-transform:scale(1.05);}70%{-webkit-transform:scale(0.9);}100%{-webkit-transform:scale(1);}
}
@-moz-keyframes bouncein{0%{opacity:0;-moz-transform:scale(0.3);}50%{opacity:1;-moz-transform:scale(1.05);}70%{-moz-transform:scale(0.9);}100%{-moz-transform:scale(1);}
}
@-ms-keyframes bouncein{0%{opacity:0;-ms-transform:scale(0.3);}50%{opacity:1;-ms-transform:scale(1.05);}70%{-ms-transform:scale(0.9);}100%{-ms-transform:scale(1);}
}
@keyframes bouncein{0%{opacity:0;transform:scale(0.3);}50%{opacity:1;transform:scale(1.05);}70%{transform:scale(0.9);}100%{transform:scale(1);}
}

弹入-从上

@-webkit-keyframes bounceinT{0%{opacity:0;-webkit-transform:translateY(-100px);}60%{opacity:1;-webkit-transform:translateY(30px);}80%{-webkit-transform:translateY(-10px);}100%{-webkit-transform:translateY(0);}
}
@-moz-keyframes bounceinT{0%{opacity:0;-moz-transform:translateY(-100px);}60%{opacity:1;-moz-transform:translateY(30px);}80%{-moz-transform:translateY(-10px);}100%{-moz-transform:translateY(0);}
}
@-ms-keyframes bounceinT{0%{opacity:0;-ms-transform:translateY(-100px);}60%{opacity:1;-ms-transform:translateY(30px);}80%{-ms-transform:translateY(-10px);}100%{-ms-transform:translateY(0);}
}
@keyframes bounceinT{0%{opacity:0;transform:translateY(-100px);}60%{opacity:1;transform:translateY(30px);}80%{transform:translateY(-10px);}100%{transform:translateY(0);}
}

弹入-从右

@-webkit-keyframes bounceinR{0%{opacity:0;-webkit-transform:translateX(100px);}60%{opacity:1;-webkit-transform:translateX(-30px);}80%{-webkit-transform:translateX(10px);}100%{-webkit-transform:translateX(0);}
}
@-moz-keyframes bounceinR{0%{opacity:0;-moz-transform:translateX(100px);}60%{opacity:1;-moz-transform:translateX(-30px);}80%{-moz-transform:translateX(10px);}100%{-moz-transform:translateX(0);}
}
@-ms-keyframes bounceinR{0%{opacity:0;-ms-transform:translateX(100px);}60%{opacity:1;-ms-transform:translateX(-30px);}80%{-ms-transform:translateX(10px);}100%{-ms-transform:translateX(0);}
}
@keyframes bounceinR{0%{opacity:0;transform:translateX(100px);}60%{opacity:1;transform:translateX(-30px);}80%{transform:translateX(10px);}100%{transform:translateX(0);}
}

弹入-从下

@-webkit-keyframes bounceinB{0%{opacity:0;-webkit-transform:translateY(100px);}60%{opacity:1;-webkit-transform:translateY(-30px);}80%{-webkit-transform:translateY(10px);}100%{-webkit-transform:translateY(0);}
}
@-moz-keyframes bounceinB{0%{opacity:0;-moz-transform:translateY(100px);}60%{opacity:1;-moz-transform:translateY(-30px);}80%{-moz-transform:translateY(10px);}100%{-moz-transform:translateY(0);}
}
@-ms-keyframes bounceinB{0%{opacity:0;-ms-transform:translateY(100px);}60%{opacity:1;-ms-transform:translateY(-30px);}80%{-ms-transform:translateY(10px);}100%{-ms-transform:translateY(0);}
}
@keyframes bounceinB{0%{opacity:0;transform:translateY(100px);}60%{opacity:1;transform:translateY(-30px);}80%{transform:translateY(10px);}100%{transform:translateY(0);}
}

弹入-从左

@-webkit-keyframes bounceinL{0%{opacity:0;-webkit-transform:translateX(-100px);}60%{opacity:1;-webkit-transform:translateX(30px);}80%{-webkit-transform:translateX(-10px);}100%{-webkit-transform:translateX(0);}
}
@-moz-keyframes bounceinL{0%{opacity:0;-moz-transform:translateX(-100px);}60%{opacity:1;-moz-transform:translateX(30px);}80%{-moz-transform:translateX(-10px);}100%{-moz-transform:translateX(0);}
}
@-ms-keyframes bounceinL{0%{opacity:0;-ms-transform:translateX(-100px);}60%{opacity:1;-ms-transform:translateX(30px);}80%{-ms-transform:translateX(-10px);}100%{-ms-transform:translateX(0);}
}
@keyframes bounceinL{0%{opacity:0;transform:translateX(-100px);}60%{opacity:1;transform:translateX(30px);}80%{transform:translateX(-10px);}100%{transform:translateX(0);}
}

弹出

@-webkit-keyframes bounceout{0%{-webkit-transform:scale(1);}25%{-webkit-transform:scale(0.95);}50%{opacity:1;-webkit-transform:scale(1.1);}100%{opacity:0;-webkit-transform:scale(0.3);}
}
@-moz-keyframes bounceout{0%{-moz-transform:scale(1);}25%{-moz-transform:scale(0.95);}50%{opacity:1;-moz-transform:scale(1.1);}100%{opacity:0;-moz-transform:scale(0.3);}
}
@-ms-keyframes bounceout{0%{-ms-transform:scale(1);}25%{-ms-transform:scale(0.95);}50%{opacity:1;-ms-transform:scale(1.1);}100%{opacity:0;-ms-transform:scale(0.3);}
}
@keyframes bounceout{0%{transform:scale(1);}25%{transform:scale(0.95);}50%{opacity:1;transform:scale(1.1);}100%{opacity:0;transform:scale(0.3);}
}

弹出-向上

@-webkit-keyframes bounceoutT{0%{-webkit-transform:translateY(0);}20%{opacity:1;-webkit-transform:translateY(20px);}100%{opacity:0;-webkit-transform:translateY(-100px);}
}
@-moz-keyframes bounceoutT{0%{-moz-transform:translateY(0);}20%{opacity:1;-moz-transform:translateY(20px);}100%{opacity:0;-moz-transform:translateY(-100px);}
}
@-ms-keyframes bounceoutT{0%{-ms-transform:translateY(0);}20%{opacity:1;-ms-transform:translateY(20px);}100%{opacity:0;-ms-transform:translateY(-100px);}
}
@keyframes bounceoutT{0%{transform:translateY(0);}20%{opacity:1;transform:translateY(20px);}100%{opacity:0;transform:translateY(-100px);}
}

弹出-向右

@-webkit-keyframes bounceoutR{0%{-webkit-transform:translateX(0);}20%{opacity:1;-webkit-transform:translateX(-20px);}100%{opacity:0;-webkit-transform:translateX(100px);}
}
@-moz-keyframes bounceoutR{0%{-moz-transform:translateX(0);}20%{opacity:1;-moz-transform:translateX(-20px);}100%{opacity:0;-moz-transform:translateX(100px);}
}
@-ms-keyframes bounceoutR{0%{-ms-transform:translateX(0);}20%{opacity:1;-ms-transform:translateX(-20px);}100%{opacity:0;-ms-transform:translateX(100px);}
}
@keyframes bounceoutR{0%{transform:translateX(0);}20%{opacity:1;transform:translateX(-20px);}100%{opacity:0;transform:translateX(100px);}
}

弹出-向下

@-webkit-keyframes bounceoutB{0%{-webkit-transform:translateY(0);}20%{opacity:1;-webkit-transform:translateY(-20px);}100%{opacity:0;-webkit-transform:translateY(100px);}
}
@-moz-keyframes bounceoutB{0%{-moz-transform:translateY(0);}20%{opacity:1;-moz-transform:translateY(-20px);}100%{opacity:0;-moz-transform:translateY(100px);}
}
@-ms-keyframes bounceoutB{0%{-ms-transform:translateY(0);}20%{opacity:1;-ms-transform:translateY(-20px);}100%{opacity:0;-ms-transform:translateY(100px);}
}
@keyframes bounceoutB{0%{transform:translateY(0);}20%{opacity:1;transform:translateY(-20px);}100%{opacity:0;transform:translateY(100px);}
}

弹出-向左

@-webkit-keyframes bounceoutL{0%{-webkit-transform:translateX(0);}20%{opacity:1;-webkit-transform:translateX(20px);}100%{opacity:0;-webkit-transform:translateX(-100px);}
}
@-moz-keyframes bounceoutL{0%{-moz-transform:translateX(0);}20%{opacity:1;-moz-transform:translateX(20px);}100%{opacity:0;-moz-transform:translateX(-100px);}
}
@-ms-keyframes bounceoutL{0%{-ms-transform:translateX(0);}20%{opacity:1;-ms-transform:translateX(20px);}100%{opacity:0;-ms-transform:translateX(-100px);}
}
@keyframes bounceoutL{0%{transform:translateX(0);}20%{opacity:1;transform:translateX(20px);}100%{opacity:0;transform:translateX(-200px);}
}

转入

@-webkit-keyframes rotatein{0%{opacity:0;-webkit-transform:rotate(-200deg);}100%{opacity:1;-webkit-transform:rotate(0);}
}
@-moz-keyframes rotatein{0%{opacity:0;-moz-transform:rotate(-200deg);}100%{opacity:1;-moz-transform:rotate(0);}
}
@-ms-keyframes rotatein{0%{opacity:0;-ms-transform:rotate(-200deg);}100%{opacity:1;-ms-transform:rotate(0);}
}
@keyframes rotatein{0%{opacity:0;transform:rotate(-200deg);}100%{opacity:1;transform:rotate(0);}
}

转入-从左上

@-webkit-keyframes rotateinLT{0%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(-90deg);opacity:0;}100%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(0);opacity:1;}
}
@-moz-keyframes rotateinLT{0%{-moz-transform-origin:left bottom;-moz-transform:rotate(-90deg);opacity:0;}100%{-moz-transform-origin:left bottom;-moz-transform:rotate(0);opacity:1;}
}
@-ms-keyframes rotateinLT{0%{-ms-transform-origin:left bottom;-ms-transform:rotate(-90deg);opacity:0;}100%{-ms-transform-origin:left bottom;-ms-transform:rotate(0);opacity:1;}
}
@keyframes rotateinLT{0%{transform-origin:left bottom;transform:rotate(-90deg);opacity:0;}100%{transform-origin:left bottom;transform:rotate(0);opacity:1;}
}

转入-从左下

@-webkit-keyframes rotateineftB{0%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(90deg);opacity:0;}100%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(0);opacity:1;}
}
@-moz-keyframes rotateineftB{0%{-moz-transform-origin:left bottom;-moz-transform:rotate(90deg);opacity:0;}100%{-moz-transform-origin:left bottom;-moz-transform:rotate(0);opacity:1;}
}
@-ms-keyframes rotateineftB{0%{-ms-transform-origin:left bottom;-ms-transform:rotate(90deg);opacity:0;}100%{-ms-transform-origin:left bottom;-ms-transform:rotate(0);opacity:1;}
}
@keyframes rotateineftB{0%{transform-origin:left bottom;transform:rotate(90deg);opacity:0;}100%{transform-origin:left bottom;transform:rotate(0);opacity:1;}
}

转入-从右上

@-webkit-keyframes rotateinRT{0%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(90deg);opacity:0;}100%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(0);opacity:1;}
}
@-moz-keyframes rotateinRT{0%{-moz-transform-origin:right bottom;-moz-transform:rotate(90deg);opacity:0;}100%{-moz-transform-origin:right bottom;-moz-transform:rotate(0);opacity:1;}
}
@-ms-keyframes rotateinRT{0%{-ms-transform-origin:right bottom;-ms-transform:rotate(90deg);opacity:0;}100%{-ms-transform-origin:right bottom;-ms-transform:rotate(0);opacity:1;}
}
@keyframes rotateinRT{0%{transform-origin:right bottom;transform:rotate(90deg);opacity:0;}100%{transform-origin:right bottom;transform:rotate(0);opacity:1;}
}

转入-从右下

@-webkit-keyframes rotateinRB{0%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(-90deg);opacity:0;}100%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(0);opacity:1;}
}
@-moz-keyframes rotateinRB{0%{-moz-transform-origin:right bottom;-moz-transform:rotate(-90deg);opacity:0;}100%{-moz-transform-origin:right bottom;-moz-transform:rotate(0);opacity:1;}
}
@-ms-keyframes rotateinRB{0%{-ms-transform-origin:right bottom;-ms-transform:rotate(-90deg);opacity:0;}100%{-ms-transform-origin:right bottom;-ms-transform:rotate(0);opacity:1;}
}
@keyframes rotateinRB{0%{transform-origin:right bottom;transform:rotate(-90deg);opacity:0;}100%{transform-origin:right bottom;transform:rotate(0);opacity:1;}
}

转出

@-webkit-keyframes rotateout{0%{-webkit-transform-origin:center center;-webkit-transform:rotate(0);opacity:1;}100%{-webkit-transform-origin:center center;-webkit-transform:rotate(200deg);opacity:0;}
}
@-moz-keyframes rotateout{0%{-moz-transform-origin:center center;-moz-transform:rotate(0);opacity:1;}100%{-moz-transform-origin:center center;-moz-transform:rotate(200deg);opacity:0;}
}
@-ms-keyframes rotateout{0%{-ms-transform-origin:center center;-ms-transform:rotate(0);opacity:1;}100%{-ms-transform-origin:center center;-ms-transform:rotate(200deg);opacity:0;}
}
@keyframes rotateout{0%{transform-origin:center center;transform:rotate(0);opacity:1;}100%{transform-origin:center center;transform:rotate(200deg);opacity:0;}
}

转出-向左上

@-webkit-keyframes rotateoutLT{0%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(0);opacity:1;}100%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(-90deg);opacity:0;}
}
@-moz-keyframes rotateoutLT{0%{-moz-transform-origin:left bottom;-moz-transform:rotate(0);opacity:1;}100%{-moz-transform-origin:left bottom;-moz-transform:rotate(-90deg);opacity:0;}
}
@-ms-keyframes rotateoutLT{0%{-ms-transform-origin:left bottom;-ms-transform:rotate(0);opacity:1;}100%{-ms-transform-origin:left bottom;-ms-transform:rotate(-90deg);opacity:0;}
}
@keyframes rotateoutLT{0%{transform-origin:left bottom;transform:rotate(0);opacity:1;}100%{transform-origin:left bottom;transform:rotate(-90deg);opacity:0;}
}

转出-向左下

@-webkit-keyframes rotateoutLB{0%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(0);opacity:1;}100%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(90deg);opacity:0;}
}
@-moz-keyframes rotateoutLB{0%{-moz-transform-origin:left bottom;-moz-transform:rotate(0);opacity:1;}100%{-moz-transform-origin:left bottom;-moz-transform:rotate(90deg);opacity:0;}
}
@-ms-keyframes rotateoutLB{0%{-ms-transform-origin:left bottom;-ms-transform:rotate(0);opacity:1;}100%{-ms-transform-origin:left bottom;-ms-transform:rotate(90deg);opacity:0;}
}
@keyframes rotateoutLB{0%{transform-origin:left bottom;transform:rotate(0);opacity:1;}100%{transform-origin:left bottom;transform:rotate(90deg);opacity:0;}
}

转出-向右上

@-webkit-keyframes rotateoutRT{0%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(0);opacity:1;}100%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(90deg);opacity:0;}
}
@-moz-keyframes rotateoutRT{0%{-moz-transform-origin:right bottom;-moz-transform:rotate(0);opacity:1;}100%{-moz-transform-origin:right bottom;-moz-transform:rotate(90deg);opacity:0;}
}
@-ms-keyframes rotateoutRT{0%{-ms-transform-origin:right bottom;-ms-transform:rotate(0);opacity:1;}100%{-ms-transform-origin:right bottom;-ms-transform:rotate(90deg);opacity:0;}
}
@keyframes rotateoutRT{0%{transform-origin:right bottom;transform:rotate(0);opacity:1;}100%{transform-origin:right bottom;transform:rotate(90deg);opacity:0;}
}

转出-向右下

@-webkit-keyframes rotateoutBR{0%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(0);opacity:1;}100%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(-90deg);opacity:0;}
}
@-moz-keyframes rotateoutBR{0%{-moz-transform-origin:right bottom;-moz-transform:rotate(0);opacity:1;}100%{-moz-transform-origin:right bottom;-moz-transform:rotate(-90deg);opacity:0;}
}
@-ms-keyframes rotateoutBR{0%{-ms-transform-origin:right bottom;-ms-transform:rotate(0);opacity:1;}100%{-ms-transform-origin:right bottom;-ms-transform:rotate(-90deg);opacity:0;}
}
@keyframes rotateoutBR{0%{transform-origin:right bottom;transform:rotate(0);opacity:1;}100%{transform-origin:right bottom;transform:rotate(-90deg);opacity:0;}
}

翻转

@-webkit-keyframes flip{0%{-webkit-transform:perspective(400px) rotateY(0);-webkit-animation-timing-function:ease-out;}40%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(170deg);-webkit-animation-timing-function:ease-out;}50%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);-webkit-animation-timing-function:ease-in;}80%{-webkit-transform:perspective(400px) rotateY(360deg) scale(0.95);-webkit-animation-timing-function:ease-in;}100%{-webkit-transform:perspective(400px) scale(1);-webkit-animation-timing-function:ease-in;}
}
@-moz-keyframes flip{0%{-moz-transform:perspective(400px) rotateY(0);-moz-animation-timing-function:ease-out;}40%{-moz-transform:perspective(400px) translateZ(150px) rotateY(170deg);-moz-animation-timing-function:ease-out;}50%{-moz-transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);-moz-animation-timing-function:ease-in;}80%{-moz-transform:perspective(400px) rotateY(360deg) scale(0.95);-moz-animation-timing-function:ease-in;}100%{-moz-transform:perspective(400px) scale(1);-moz-animation-timing-function:ease-in;}
}
@-ms-keyframes flip{0%{-ms-transform:perspective(400px) rotateY(0);-ms-animation-timing-function:ease-out;}40%{-ms-transform:perspective(400px) translateZ(150px) rotateY(170deg);-ms-animation-timing-function:ease-out;}50%{-ms-transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);-ms-animation-timing-function:ease-in;}80%{-ms-transform:perspective(400px) rotateY(360deg) scale(0.95);-ms-animation-timing-function:ease-in;}100%{-ms-transform:perspective(400px) scale(1);-ms-animation-timing-function:ease-in;}
}
@keyframes flip{0%{transform:perspective(400px) rotateY(0);animation-timing-function:ease-out;}40%{transform:perspective(400px) translateZ(150px) rotateY(170deg);animation-timing-function:ease-out;}50%{transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);animation-timing-function:ease-in;}80%{transform:perspective(400px) rotateY(360deg) scale(0.95);animation-timing-function:ease-in;}100%{transform:perspective(400px) scale(1);animation-timing-function:ease-in;}
}

翻入-X轴

@-webkit-keyframes flipinX{0%{-webkit-transform:perspective(400px) rotateX(90deg);opacity:0;}40%{-webkit-transform:perspective(400px) rotateX(-10deg);}70%{-webkit-transform:perspective(400px) rotateX(10deg);}100%{-webkit-transform:perspective(400px) rotateX(0);opacity:1;}
}
@-moz-keyframes flipinX{0%{-moz-transform:perspective(400px) rotateX(90deg);opacity:0;}40%{-moz-transform:perspective(400px) rotateX(-10deg);}70%{-moz-transform:perspective(400px) rotateX(10deg);}100%{-moz-transform:perspective(400px) rotateX(0);opacity:1;}
}
@-ms-keyframes flipinX{0%{-ms-transform:perspective(400px) rotateX(90deg);opacity:0;}40%{-ms-transform:perspective(400px) rotateX(-10deg);}70%{-ms-transform:perspective(400px) rotateX(10deg);}100%{-ms-transform:perspective(400px) rotateX(0);opacity:1;}
}
@keyframes flipinX{0%{transform:perspective(400px) rotateX(90deg);opacity:0;}40%{transform:perspective(400px) rotateX(-10deg);}70%{transform:perspective(400px) rotateX(10deg);}100%{transform:perspective(400px) rotateX(0);opacity:1;}
}

翻入-Y轴

@-webkit-keyframes flipinY{0%{-webkit-transform:perspective(400px) rotateY(90deg);opacity:0;}40%{-webkit-transform:perspective(400px) rotateY(-10deg);}70%{-webkit-transform:perspective(400px) rotateY(10deg);}100%{-webkit-transform:perspective(400px) rotateY(0);opacity:1;}
}
@-moz-keyframes flipinY{0%{-moz-transform:perspective(400px) rotateY(90deg);opacity:0;}40%{-moz-transform:perspective(400px) rotateY(-10deg);}70%{-moz-transform:perspective(400px) rotateY(10deg);}100%{-moz-transform:perspective(400px) rotateY(0);opacity:1;}
}
@-ms-keyframes flipinY{0%{-ms-transform:perspective(400px) rotateY(90deg);opacity:0;}40%{-ms-transform:perspective(400px) rotateY(-10deg);}70%{-ms-transform:perspective(400px) rotateY(10deg);}100%{-ms-transform:perspective(400px) rotateY(0);opacity:1;}
}
@keyframes flipinY{0%{transform:perspective(400px) rotateY(90deg);opacity:0;}40%{transform:perspective(400px) rotateY(-10deg);}70%{transform:perspective(400px) rotateY(10deg);}100%{transform:perspective(400px) rotateY(0);opacity:1;}
}

翻出-X轴

@-webkit-keyframes flipoutX{0%{-webkit-transform:perspective(400px) rotateX(0);opacity:1;}100%{-webkit-transform:perspective(400px) rotateX(90deg);opacity:0;}
}
@-moz-keyframes flipoutX{0%{-moz-transform:perspective(400px) rotateX(0);opacity:1;}100%{-moz-transform:perspective(400px) rotateX(90deg);opacity:0;}
}
@-ms-keyframes flipoutX{0%{-ms-transform:perspective(400px) rotateX(0);opacity:1;}100%{-ms-transform:perspective(400px) rotateX(90deg);opacity:0;}
}
@keyframes flipoutX{0%{transform:perspective(400px) rotateX(0);opacity:1;}100%{transform:perspective(400px) rotateX(90deg);opacity:0;}
}

翻出-Y轴

@-webkit-keyframes flipoutY{0%{-webkit-transform:perspective(400px) rotateY(0);opacity:1;}100%{-webkit-transform:perspective(400px) rotateY(90deg);opacity:0;}
}
@-moz-keyframes flipoutY{0%{-moz-transform:perspective(400px) rotateY(0);opacity:1;}100%{-moz-transform:perspective(400px) rotateY(90deg);opacity:0;}
}
@-ms-keyframes flipoutY{0%{-ms-transform:perspective(400px) rotateY(0);opacity:1;}100%{-ms-transform:perspective(400px) rotateY(90deg);opacity:0;}
}
@keyframes flipoutY{0%{transform:perspective(400px) rotateY(0);opacity:1;}100%{transform:perspective(400px) rotateY(90deg);opacity:0;}
}

闪烁

@-webkit-keyframes flash{0%,50%,100%{opacity:1;}25%,75%{opacity:0;}
}
@-moz-keyframes flash{0%,50%,100%{opacity:1;}25%,75%{opacity:0;}
}
@-ms-keyframes flash{0%,50%,100%{opacity:1;}25%,75%{opacity:0;}
}
@keyframes flash{0%,50%,100%{opacity:1;}25%,75%{opacity:0;}
}

震颤

@-webkit-keyframes shake{0%,100%{-webkit-transform:translateX(0);}10%,30%,50%,70%,90%{-webkit-transform:translateX(-10px);}20%,40%,60%,80%{-webkit-transform:translateX(10px);}
}
@-moz-keyframes shake{0%,100%{-moz-transform:translateX(0);}10%,30%,50%,70%,90%{-moz-transform:translateX(-10px);}20%,40%,60%,80%{-moz-transform:translateX(10px);}
}
@-ms-keyframes shake{0%,100%{-ms-transform:translateX(0);}10%,30%,50%,70%,90%{-ms-transform:translateX(-10px);}20%,40%,60%,80%{-ms-transform:translateX(10px);}
}
@keyframes shake{0%,100%{transform:translateX(0);}10%,30%,50%,70%,90%{transform:translateX(-10px);}20%,40%,60%,80%{transform:translateX(10px);}
}

摇摆

@-webkit-keyframes swing{20%{-webkit-transform:rotate(15deg);}40%{-webkit-transform:rotate(-10deg);}60%{-webkit-transform:rotate(5deg);}80%{-webkit-transform:rotate(-5deg);}100%{-webkit-transform:rotate(0);}
}
@-moz-keyframes swing{20%{-moz-transform:rotate(15deg);}40%{-moz-transform:rotate(-10deg);}60%{-moz-transform:rotate(5deg);}80%{-moz-transform:rotate(-5deg);}100%{-moz-transform:rotate(0);}
}
@-ms-keyframes swing{20%{-ms-transform:rotate(15deg);}40%{-ms-transform:rotate(-10deg);}60%{-ms-transform:rotate(5deg);}80%{-ms-transform:rotate(-5deg);}100%{-ms-transform:rotate(0);}
}
@keyframes swing{20%{transform:rotate(15deg);}40%{transform:rotate(-10deg);}60%{transform:rotate(5deg);}80%{transform:rotate(-5deg);}100%{transform:rotate(0);}
}

摇晃

@-webkit-keyframes wobble{0%{-webkit-transform:translateX(0);}15%{-webkit-transform:translateX(-100px) rotate(-5deg);}30%{-webkit-transform:translateX(80px) rotate(3deg);}45%{-webkit-transform:translateX(-65px) rotate(-3deg);}60%{-webkit-transform:translateX(40px) rotate(2deg);}75%{-webkit-transform:translateX(-20px) rotate(-1deg);}100%{-webkit-transform:translateX(0);}
}
@-moz-keyframes wobble{0%{-moz-transform:translateX(0);}15%{-moz-transform:translateX(-100px) rotate(-5deg);}30%{-moz-transform:translateX(80px) rotate(3deg);}45%{-moz-transform:translateX(-65px) rotate(-3deg);}60%{-moz-transform:translateX(40px) rotate(2deg);}75%{-moz-transform:translateX(-20px) rotate(-1deg);}100%{-moz-transform:translateX(0);}
}
@-ms-keyframes wobble{0%{-ms-transform:translateX(0);}15%{-ms-transform:translateX(-100px) rotate(-5deg);}30%{-ms-transform:translateX(80px) rotate(3deg);}45%{-ms-transform:translateX(-65px) rotate(-3deg);}60%{-ms-transform:translateX(40px) rotate(2deg);}75%{-ms-transform:translateX(-20px) rotate(-1deg);}100%{-ms-transform:translateX(0);}
}
@keyframes wobble{0%{transform:translateX(0);}15%{transform:translateX(-100px) rotate(-5deg);}30%{transform:translateX(80px) rotate(3deg);}45%{transform:translateX(-65px) rotate(-3deg);}60%{transform:translateX(40px) rotate(2deg);}75%{transform:translateX(-20px) rotate(-1deg);}100%{transform:translateX(0);}
}

震铃

@-webkit-keyframes ring{0%{-webkit-transform:scale(1);}10%,20%{-webkit-transform:scale(0.9) rotate(-3deg);}30%,50%,70%,90%{-webkit-transform:scale(1.1) rotate(3deg);}40%,60%,80%{-webkit-transform:scale(1.1) rotate(-3deg);}100%{-webkit-transform:scale(1) rotate(0);}
}
@-moz-keyframes ring{0%{-moz-transform:scale(1);}10%,20%{-moz-transform:scale(0.9) rotate(-3deg);}30%,50%,70%,90%{-moz-transform:scale(1.1) rotate(3deg);}40%,60%,80%{-moz-transform:scale(1.1) rotate(-3deg);}100%{-moz-transform:scale(1) rotate(0);}
}
@-ms-keyframes ring{0%{-ms-transform:scale(1);}10%,20%{-ms-transform:scale(0.9) rotate(-3deg);}30%,50%,70%,90%{-ms-transform:scale(1.1) rotate(3deg);}40%,60%,80%{-ms-transform:scale(1.1) rotate(-3deg);}100%{-ms-transform:scale(1) rotate(0);}
}
@keyframes ring{0%{transform:scale(1);}10%,20%{transform:scale(0.9) rotate(-3deg);}30%,50%,70%,90%{transform:scale(1.1) rotate(3deg);}40%,60%,80%{transform:scale(1.1) rotate(-3deg);}100%{transform:scale(1) rotate(0);}
}

最后给大家上一个完整的例子

<style>
body{  overflow: hidden;
}
.st-container {  position: absolute; width: 100%; height: 100%; top: 0; left: 0; font-family: Arial, sans-serif;
}
.st-container > input,  .st-container > a {  position: fixed; top: 0; width: 20%; cursor: pointer; font-size: 16px; height: 34px; line-height: 34px;
}
.st-container > input {  opacity: 0; z-index: 1000;
}
.st-container > a {  z-index: 10; font-weight: 700; background: #e23a6e; color: #fff;  text-align: center;  text-shadow: 1px 1px 1px rgba(151,24,64,0.2);  text-decoration: none;
}
.st-container:after {  content: '';  position: fixed;  width: 100%;  height: 34px;  background: #e23a6e;  z-index: 9;  top: 0;
}
#st-control-1, #st-control-1 + a {  left: 0;
}
#st-control-2, #st-control-2 + a {  left: 20%;
}
#st-control-3, #st-control-3 + a {  left: 40%;
}
#st-control-4, #st-control-4 + a {  left: 60%;
}
#st-control-5, #st-control-5 + a {  left: 80%;
}
.st-container > input:checked + a,
.st-container > input:checked:hover + a{  background: #821134;
}
.st-container > input:checked + a:after,  .st-container > input:checked:hover + a:after{  top: 100%;  border: solid transparent;  content: '';  height: 0;  width: 0;  position: absolute;  pointer-events: none;  border-top-color: #821134;  border-width: 20px;  left: 50%;  margin-left: -20px;
}
.st-container > input:hover + a{  background: #AD244F;
}
.st-container > input:hover + a:after {  border-bottom-color: #AD244F;
}
.st-scroll,.st-panel {  position: relative;  width: 100%;  height: 100%;
}
.st-scroll {  top: 0;  left: 0;  -webkit-transition: all 0.6s ease-in-out;-webkit-transform: translate3d(0, 0, 0);  -webkit-backface-visibility: hidden;  border: solid 1px #ccc;
}
.st-panel{  background: #fff;  overflow: hidden;
}
#st-control-1:checked ~ .st-scroll {  -webkit-transform: translateY(0%);  background-color: green;
}
#st-control-2:checked ~ .st-scroll {  -webkit-transform: translateY(-100%);  background-color: green;
}
#st-control-3:checked ~ .st-scroll {  -webkit-transform: translateY(-200%);  background-color: green;
}
#st-control-4:checked ~ .st-scroll {  -webkit-transform: translateY(-300%);  background-color: green;
}
#st-control-5:checked ~ .st-scroll {  -webkit-transform: translateY(-400%);  background-color: green;
}
#st-control-1:checked ~ .st-scroll #st-panel-1 h2,
#st-control-2:checked ~ .st-scroll #st-panel-2 h2,
#st-control-3:checked ~ .st-scroll #st-panel-3 h2,
#st-control-4:checked ~ .st-scroll #st-panel-4 h2,
#st-control-5:checked ~ .st-scroll #st-panel-5 h2{  -webkit-animation: moveDown 1.6s ease-in-out 1.2s backwards;
}
@keyframes moveDown{  0% {   -webkit-transform: translateY(-40px);   opacity: 0;  }  100% {   -webkit-transform: translateY(0px);    opacity: 1;  }
}
.st-panel h2 {  color: #e23a6e;  text-shadow: 1px 1px 1px rgba(151,24,64,0.2);  position: absolute;  font-size: 54px;  font-weight: 900;  width: 80%;  left: 10%;  text-align: center;  line-height: 50px;  margin: -70px 0 0 0;  padding: 0;  top: 50%;  -webkit-backface-visibility: hidden;
}
.st-panel p {  position: absolute;  text-align: center;  font-size: 16px;  line-height: 22px;  color: #8b8b8b;  z-index: 2;  padding: 0;  width: 50%;  left: 25%;  top: 50%;  margin: 10px 0 0 0;  -webkit-backface-visibility: hidden;
}
</style>  <div class="container">            <div class="st-container">                <input type="radio" name="radio-set" checked="checked" id="st-control-1">  <a href="#st-panel-1">Serendipity</a>  <input type="radio" name="radio-set" id="st-control-2">  <a href="#st-panel-2">Happiness</a>  <input type="radio" name="radio-set" id="st-control-3">  <a href="#st-panel-3">Tranquillity</a>  <input type="radio" name="radio-set" id="st-control-4">  <a href="#st-panel-4">Positivity</a>  <input type="radio" name="radio-set" id="st-control-5">  <a href="#st-panel-5">Passion</a>                    <div class="st-scroll">                        <section class="st-panel" id="st-panel-1">  <h2>Serendipity</h2>  <p>Banksy adipisicing eiusmod banh mi sed. Squid stumptown est odd future nisi, commodo mlkshk pop-up adipisicing retro.</p>  </section><section class="st-panel st-color" id="st-panel-2">  <h2>Happiness</h2>  <p>Art party readymade beard labore cosby sweater culpa. Art party whatever incididunt, scenester umami polaroid tofu.</p>  </section><section class="st-panel" id="st-panel-3">  <h2>Tranquillity</h2>  <p>Sint aute occaecat id vice. Post-ironic fap pork belly next level godard, id fanny pack williamsburg forage truffaut.</p>  </section> <section class="st-panel st-color" id="st-panel-4">  <h2>Positivity</h2>  <p>Mixtape fap leggings art party, butcher authentic farm-to-table you probably haven't heard of them do labore cosby sweater.</p>  </section>  <section class="st-panel" id="st-panel-5">  <h2>Passion</h2>  <p>Fixie ad odd future polaroid dreamcatcher, nesciunt carles bicycle rights accusamus mcsweeney's mumblecore nulla irony.</p>  </section>  </div></div></div>

感悟：拥有健康，你就有可能拥有其他一切；没有健康，你还想拥有什么