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是可以指定元素的某一个属性值;其对应的属性如下:
| background-color | background-position | border-bottom/left/top/right-color | border-bottom/left/top/right-width | border-spacing | bottom/left/top/right | clip | color | font-size | font-weight | height | letter-spacing | line-height | margin-bottom/left/top/right | max/min-height/width | opacity | outline-color | outline-width | padding-bottom/left/top/right | text-indent | text-shadow | vertical-align | visibility | width | word-spacing | z-index |
用一个简单的例子来说明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 / IDENTIDENT是由@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> 感悟：拥有健康，你就有可能拥有其他一切；没有健康，你还想拥有什么
