802      阿里云  技术社区[云栖]

一起领略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:指定过渡开始出现的延迟时间

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

语法:

 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个可能值:

举例:

<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 ></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 ></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 ></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 ></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设置一样,下面我列出他们相对应的写法:

其中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 ></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;其四个属性值对应效果如下:

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

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

animation-fill-mode:forwards; 

最后更新：2017-11-10 17:04:01

  上一篇：  阿里云聆听，开门接客8个月成效如何？

  下一篇：  11月10日云栖精选夜读：零点之战！2017双11关键技术全公开