一起领略css3动画的强大-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

一起领略css3动画的强大

简介: CSS3的确出了不少高大上的功能,3D效果/动画/多列等等;今天写篇文章记录怎么一下怎么用CSS3写一个动画;不过还是要提醒大家:IE9及以下版本不支持CSS3动画(需要可以考虑用js,不过估计效果不好);chrome和safafi建议加上前缀-webkit-以向前兼容老版本 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是可以指定元素的某一个属性值;其对应的属性如下:

| 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 / 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>  

感悟:拥有健康,你就有可能拥有其他一切;没有健康,你还想拥有什么

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章