css动画

0.27字数 8419阅读 480

看了很多视频、文章,最后却通通忘记了,别人的知识依旧是别人的,自己却什么都没获得。此系列文章旨在加深自己的印象,因此此系列文章大都是将别人的文章连复制带写而来,若有侵权,请及时通知,必定立即删除。

首先回顾一下矩阵,为后面学martix作铺垫


从上面这种写法,已经能看出矩阵乘法的规则了:系数矩阵第一行的2和1,各自与 x 和 y 的乘积之和,等于3

从transform开始:

前置属性:
transform-origin
transform-style
perspective
perspective-origin
backface-visibility
2D变形:
translate
scale
rotate
skew
matrix
3D变形:
translate3d
scale3d
rotate3d
matrix3d

transform-origin用于指定元素变形的中心点。默认中心点就是元素的正中心,即XYZ轴的50% 50% 0处。可以通过该属性改变元素在XYZ轴的中心点,正值表示正向位移,负值表示负向位移。(XYZ轴的正向分别是往右,往下,靠近用户眼睛。反之为反向)

表示2维的x-offset/y-offset可以设px值也可以设%百分比,也可设top / right / bottom / left / center等keyword。表示3维的z-offset只能设px值,不能设%百分比,也没有keyword。

默认中心点在元素正中心,因此关键字top等价于top center等价于50% 0%(x轴仍旧留在50%处,y轴位移到0%处)。同理各关键字例如right等价于right center等价于100% 50%,不多赘述

一图胜千言:为图片设置不同的中心点后,看它们旋转,扭曲,缩放的效果。例如图1表头的第一行center表示transform-origin: center。第二行rotate(30deg);表示transform: rotate(30deg);

另外transform-origin指定变形中心点对translate位移没有影响。translate位移始终相对于元素正中心进行位移,有怀疑精神的可以自己试一下。

其实transform-origin只是一个语法糖而已,你总是可以用translate来代替它。每个transform-origin都可以被两个translate模拟出来(by CSS变形规范的编辑Aryeh Gregor)。例如:

transform: rotate(30deg);
transform-origin: 200px 300px;

//等价于
transform: translate(200px, 300px) 
           rotate(30deg)
           translate(-200px, -300px); 
transform-origin: 0 0;

transform-style这个属性比较简单只有两个值flat和preserve-3d。用于指定舞台为2D或3D,默认值flat表示2D舞台,所有子元素2D层面展现。 preserve-3d看名字就知道了表示3D舞台,所有子元素在3D层面展现。注意,在变形元素自身上指定该属性是没有用的,它用于指定舞台,所以要在变形元素的父元素上设置该属性。设定后,所有子元素共享该舞台。一图胜千言

.div1 {
    float: left;
    background-color: red;
    transform: perspective(200px) rotateY(45deg);
}
.div1 img{
    transform: translateZ(16px);
}
.p3d {
    transform-style: preserve-3d;
}
<div class="div1">![](head75.png)</div>
<div class="div1 p3d">![](head75.png)</div>

两图唯一的区别是:右图的父div上设了transform-style: preserve-3d;,因此呈现了3d效果。左图的父div没有设transform-style默认是flat,因此元素不会在Z轴展开(translateZ(16px)失效),只能呈现2D效果。

另外如果同时设了transform-style: preserve-3d;和overflow: hidden;,3D效果将失效,等价于transform-style: flat;。如果你发现3D效果没有像预想地那样出现,可以检查一下(包括祖先元素)是否有overflow: hidden;,该属性将flatten everything…

perspective指定3D的视距。默认值是none表示无3D效果,即2D扁平化。上面例子代码里其实已经用到过该属性了。介绍它之前,先借用rotateX / rotateY / rotateZ来明确一下xyz轴坐标的基本概念。一图胜千言,依次是rotateX轴旋转,rotateY轴旋转,rotateZ轴旋转:

.x {
    transform: perspective(200px) rotateX(60deg);
}
.y {
    transform: perspective(200px) rotateY(60deg);
}
.z {
    transform: perspective(200px) rotateZ(60deg);
}
![](head75.png)
![](head75.png)
![](head75.png)

从图中也可以看出,烤羊肉串就是X轴旋转,钢管舞就是Y轴旋转,彩票转盘就是Z轴旋转。上面z轴只是一个点,想象一下就能明白,该点其实是一根垂直于屏幕的线,而perspective视距就是该线从屏幕到用户眼睛的距离

实现3D的关键就是要有perspective视距,如果将上述代码中perspective(200px)去掉

除了Z轴旋转不受影响外,XY轴虽然还在旋转,但失去了3D效果,是2D扁平化的旋转。原因就是因为不设perspective的话,其默认值为none,没有视距没有3D

perspective 只能设px值,不能设%百分比。值越小表示用户眼睛距离屏幕越近,相当于创建一个较大的3D舞台。反之,值越大表示用户眼睛 距离屏幕越远,相当于创建一个较小的3D舞台。这很容易理解,离的越近东西看起来越大,离的越远东西看起来越小。但具体该怎么设呢?借用W3C的图配合translateZ来帮助理解视距

图中d就是perspective视距,Z就是translateZ轴的位移。Z轴正向位移时,3D舞台将放大。反之,Z轴负向位移时,3D舞台将缩小。 上图Z是d的一半,因此3D舞台上的元素将是原来的2倍。下图Z同样是d的一半,但由于是负值,所以3D舞台上的元素将缩小三分之一

.divsp {
    display: inline-block;
    border: 1px blue dashed;
    margin-left: 30px;
    perspective: 100px;
}
.z1 {
    transform: translateZ(-75px);
}
.z2 {
    transform: translateZ(0px);
}
.z3 {
    transform: translateZ(25px);
}
.z4 {
    transform: translateZ(101px);
}
<div class="divsp">![](head75.png)</div>
<div class="divsp">![](head75.png)</div>
<div class="divsp">![](head75.png)</div>
<div class="divsp">![](head75.png)</div>

4张图的视距都是100px,表示4张图的3D舞台距离你的眼睛100px。我们从右往左来理解。图4的translateZ(101px)看到图片消失了,因为3D舞台距离你眼睛100px,而图片从舞台往Z轴正向位移101px,图片到了你脑袋后面自然什么都看不见。如果设成translateZ(100px),相当于图片紧贴着你的眼睛,所以全屏都是图片。图3的translateZ(25px),原始图片为75px,放大后的图片为100px。这是道初中数学题,你可以画一个底边是75px(图片原始尺寸),高是75px(视距100px-Z轴位移25px=75px)的等腰三角形,然后高扩展到100px,底边将等比例扩大3分之1至100px。图2的translateZ(0px)表示Z轴没有位移,因此仍旧是原始大小。图4的translateZ(-75px),同样是道初中数学题,原始图片为75px,缩小到42.85px,再看看上面W3C的图理解一下,很容易算出来

仔细看代码的可以看出来,上面介绍XYZ轴旋转时是直接在变形元素img上指定的transform: perspective(200px) rotateX(60deg);。而上面的代码是给变形元素img的父div指定perspective: 100px;。你可以理解为前一种方式是perspective()函数,后一种方式是perspective属性。两种指定方式是有区别的:

前者perspective()函数指定只针对当前变形元素,需要和transform其他函数一起使用,仅表示当前变形元素的视距。
后者perspective属性指定用于3D舞台,即3D舞台的视距,里面的子元素共享这个视距

基点默认值是50% 50%即center,表示视距基点在中心点不进行任何位移。你可以让基点在XY轴上进行位移,产生上图那样的效果。注意该属性同样应该定义在父元素上,适用于整个3D舞台。它需要和perspective属性结合着一起用。效果如下图:

.td1 { 
    transform-style: preserve-3d;
    perspective: 200px;
    perspective-origin: center;
}

为节约篇幅,只贴出来图1的3D舞台的配置,其余8图只需根据表头修改perspective-origin即可。根据上面9宫格图就比较容易理解perspective-origin视距基点的意思了。默认值50% 50%即center表示眼睛在舞台正中心。然后根据XY轴的位移量,或关键字left(等价于x轴0%)等,调整眼睛看3D舞台的位置

backface-visibility用于是否可以看见3D舞台背面,默认值visible表示背面可见,可以设成hidden让背面不可见。通常当旋转时,如果不希望背面显示出来,该属性就很有用,设成hidden即可

.stage{
    float: left;
    margin: 5px;
    perspective: 200px;
}
.container {
    transform-style: preserve-3d;
}
.image {
    backface-visibility: hidden;
}
.front {
    position: absolute;
    z-index: 1;
}
.back {
    transform: rotateY(180deg);
}
.stage:nth-child(1) .container{ transform: rotateY(0deg); }
.stage:nth-child(2) .container{ transform: rotateY(30deg); }
.stage:nth-child(3) .container{ transform: rotateY(60deg); }
.stage:nth-child(4) .container{ transform: rotateY(90deg); }
.stage:nth-child(5) .container{ transform: rotateY(120deg); }
.stage:nth-child(6) .container{ transform: rotateY(150deg); }
.stage:nth-child(7) .container{ transform: rotateY(180deg); }

<div class="stage">    //为节约篇幅该DOM请无脑复制7个
    <div class="container">
        ![](head75.png)
        ![](bg75.png)
    </div>
</div>

DOM结构中就能看出,是两张图片(一正一反)叠在了一起。由于变形元素img设了backface-visibility: hidden;, 当Y轴旋转超过90度时(Y轴旋转正好90度时,正中间图4为一片空白,就像丁字裤在视线里消失了_),正面的图片将不可见,底下的背面图片显示出来 了。如果将img的backface-visibility属性去掉(默认为visibility),效果如下图。Y轴旋转超过90度时,将显示正面的图 片的背部(所谓背部对屏幕来说其实就是图片矩阵的X轴值取反)

常见的3D的HTML结构如下:

<舞台>         
//为舞台加上perspective
    <容器>     
    //为容器加上preserve-3d,使容器内元素共享同一个3D渲染环境
        <元素> 
        //为元素加上transform效果
    </容器>
</舞台>

translate位移系列中用于2D的有:translate,translateX,translateY

translate位移,类似于position:relative属性。可设单值,也可设双值。正数表示XY轴正向位移,负数为反向位移。设单值表示只X轴位移,Y轴坐标不变,例如transform: translate(100px);等价于transform: translate(100px,0);。这点和CSS中其他单值属性稍有不同,不要误以为单值是X轴和Y轴均位移。当然最好还是用双值,如果真的和Y轴无关,也请用translateX(100px),虽然效果是一样的,但代码可读性更高。同理如果和X轴无关,可以用transform: translateY(100px);等价于transform: translate(0, 100px);

上面说了效果类似于position:relative属性,但和position语义不同,position用于页面布局,而translate 属于transform中的一个系列,用于元素变形。你可能觉得语义不同有什么卵用,效果OK不就行了?就看你用什么标准来衡量效果了。CSS的神奇之处 在于你可以将一个属性用在完全违背它原意的场景下,抛开代码可读性不谈,违背原意有时还是会有细微差别的。如结合动画效果时,translate能小于 1px过渡,因此动画效果更为平滑。但position最小单位就是1px,动画效果肯定打折扣。另外用translate实现动画时,可以使用GPU, 动画的FPS更高,而position显然无法享受这个优势。其他如回流和重绘也都有差异。因此如果你在该用translate的地方用了 position,今后一些需求变动达不到要求,你也没什么立场可抱怨的了

scale缩放系列中用于2D的有:scale,scaleX,scaleY

scale缩放,同样可以设单值和双值。单值时表示X轴和Y轴等值缩放。默认值为1,要缩小请设0.01~0.99之间的值,要放大请设超过1的值。例如缩小一倍可以transform: scale(.5);,放大一倍可以transform: scale(2);。效果在最上面介绍transform-origin时图片里已经有了,不多赘述。

如果只想X轴缩放,可以用scaleX(.5)相当于scale(.5, 1)。同理只想Y轴缩放,可以用scaleY(.5)相当于scale(1, .5)。

scale还能设负数,负数会先将元素反转再缩放,如transform: scale(-.5, -1.5);,效果见上面右图。为何反转能理解吧?XY轴像素矩阵各值取反后,效果等价于反转。当然你同样可以用rotate实现反转

rotate旋转系列中用于2D的有:rotate

正数表示顺时针旋转,负数表示逆时针旋转。如transform: rotate(30deg);在2D层面上没有rotateX / rotateY,它俩和rotateZ都是3D旋转

skew扭曲系列中用于2D的有:skew,skewX,skewY

skew扭曲可以设单值和双值。单值时表示只X轴扭曲,Y轴不变,如transform: skew(30deg);等价于transform: skew(30deg, 0);。考虑到可读性,不推荐用单值,应该用transform: skewX(30deg);。skewY表示只Y轴扭曲,X轴不变。效果在最上面介绍transform-origin时图片里已经有了,不多赘述

matrix矩阵前面没有直接接触,但却是所有2D变形的本质,上面所有2D变形效果都可以用matrix矩阵来实现

3D变形有translate3d位移,scale3d缩放,rotate3d旋转, matrix3d矩阵。(注意skew扭曲是没有3D的)。3D的用法和2D差不多,只不过多了个Z轴的值而已

translate3d位移系列中用于3D的有:translate3d,translateZ

translate3d(tx,ty,tz),其中tz的Z轴长度只能为px值,不能为%百分比。translateZ等价于translate3d(0,0,tz)。 Z轴的值越大表示离眼睛越近,元素就越大,但当值大于perspective视距时元素将消失,因为眼睛无法看见眼睛背后的东西,这在上面介绍 perspective时已经介绍过,不再赘述。值越小表示离眼睛越远,元素就越小。实际使用中translateZ效果和2D的scale缩放效果非常 像,但原理是有区别的,translateZ是Z轴上位移,而scale是XY轴的缩放。还是那句话,尽量将属性用在符合属性愿意的场合

scale3d缩放系列中用于3D的有:scale3d,scaleZ

cale3d(sx,sy,sz),其中sz为Z轴的缩放比例,取值同sx,sy一样,在0.01~0.99时元素缩小,1时大小不变,大于1时元素变大。scaleZ等价于scale(1,1,sz)。需要注意的是单独使用scale3d或scaleZ不会有任何效果,需要配合其他属性在3D舞台上才能出现效果,否则Z轴的缩放比例根本无法定义

rotate3d旋转系列中用于3D的有:rotate3d,rotateX,rotateY,rotateZ

rotate3d(x,y,z,a)这里多了一个参数a(读音是阿尔法…)表示3D舞台上旋转的角度,而xyz的取值为0~1为各轴的旋转矢量值。rotate3d,rotateX,rotateY,rotateZ的效果在上面都有展示,不赘述。

matrix3d矩阵是所有3D变形的本质,上面所有3D变形效果都可以用matrix3d矩阵来实现

matrix(scaleX(),skewX(),skewY(),scaleY(),translateX(),translateY());

现在来看看变形对CSS层级的影响。说起层级,absolute绝对是层级间的高富帅,见一个睡一个,sorry,是见一个压一个,sorry,是见一个覆盖一个

//左图
![](bg100.png)
![](head75.png)
//右图
![](bg100.png)
![](head75.png)

左图因为第一张img具有absolute,完全无视DOM结构中的顺序,妥妥地覆盖了第二张img。右图给第二张img设了transform,通常我们会认为scale(1)是废代码,但实际从右图已经看出,由于设立transform,使元素具有了相当于absolute的层级,因此两张img平级了,根据DOM中的顺序,后者覆盖了前者

(这里使用的是scale,你可以改成rotate,skew等,效果都一样。即层级和transform有关,但和具体哪个transform函数无关)

因为absolute和transform平级,你可以调整上面两张img的顺序,这样设了transform的图片会被absolute覆盖。如果你非要让absolute高人一等,可以设z-index:1这样层级会高于transform,达到覆盖效果。

和absolute同系列的relative和fixed也适用上述层级关系。如果你页面上有个fixed广告标签,页面滚动时被transform元素覆盖了,请不要惊讶,试试设一下z-index

rotate demo

<style>div{
    margin:100px;
    width:100px;
    height:100px;
    background:red;
    transition: transform 0.5s linear;
}
div:hover{
    transform:rotate(45deg) rotate(-70deg);
}</style>
<div></div>

等价于直接写rotate(-30deg)

matrix表示法

<style>
div{
    margin:100px;
    width:100px;
    height:100px;
    background:red;
    transition: transform 0.5s linear;
}
div:hover{
    transform:matrix(0.5,0.5,-0.5,0.5,0,0) scale(1.414);
}
</style>
<div></div>

用matrix实现平移:

<style>
div{
    margin:100px;
    width:100px;
    height:100px;
    background:red;
    transition: transform 0.5s linear;
}
div:hover{
    transform:matrix(1,0,0,1,20,40);
}
</style>
<div></div>

scale的matrix表示法

<style>
div{
    margin:100px;
    width:100px;
    height:100px;
    background:red;
    transition: transform 0.5s linear;
}
div:hover{
    transform:matrix(1.5,0,0,1.5,0,0);
}
</style>
<div></div>

扭曲:沿着一个角度发生切变(高度不变,整体倾斜),又叫切变
skew matrix表示法

<style>
div{
    margin:100px;
    width:100px;
    height:100px;
    background:red;
    transition: transform 0.5s linear;
}
div:hover{
    transform:matrix(1,0,-1,1,0,0);
}
</style>
<div></div>

matrix(scaleX(),skewX(),skewY(),scaleY(),translateX(),translateY());

旋转:

cos45 -sin45
sin45 cos45

matrix的测试器:

<meta charset="utf-8">
<style>
div{
    margin:200px auto;
    height:100px;
    width:200px;
    background:red;
    font-size: 20px;
    color:white;
    line-height:100px;
    text-align:center;
}
input{
    height:30px;
}
</style>
参数1:<input type="number" value="1" step="0.5"/>
参数2:<input type="number" value="0" step="0.5"/>
参数3:<input type="number" value="0" step="0.5"/>
参数4:<input type="number" value="1" step="0.5"/>
<br />
参数5:<input type="number" value="0" step="10"/>
参数6:<input type="number" value="0" step="10"/>
<div>I love this world!</div>
<script>
var body = document.querySelector('body');
var target = document.querySelector('div');
body.onclick = function() {
    var inputs = document.querySelectorAll('input');
    var array = [];
    [].forEach.call(inputs, function(input) {
        array.push(input.value);
    });
    target.style.transform = 'matrix(' + array.join(',') + ')';
}
</script>

由以上可知,其他变换都可以由martix转换而来,接下来讲讲原理:

matrix(scaleX(),skewX(),skewY(),scaleY(),translateX(),translateY());

旋转:

cos45 -sin45
sin45 cos45

先看看容易点的2D矩阵matrix,共有6个参数matrix(a, b, c, d, e, f),各参数在矩阵中的位置:


元素原本的XY轴坐标经matrix变换后,新坐标为x1,y1。计算公式如下:

这是线性代数里最简单的内容了,虽然难一点的线性代数的知识全还给老师了,但这点应该不难理解,横行乘竖行

以translate位移举例。想将其在XY轴上相对原点位置位移,很简单translate(tx, ty);即可。你也可以用matrix实现。原点坐标为xy,经translate位移后新坐标需要为x1=x+tx,y1=y+ty。根据上图,等价于matrix(1,0,0,1,tx,ty);。例如translate(50px, 100px);等价于matrix(1,0,0,1,50,100);

同理scale缩放后新坐标需要为x1=xsx,y1=ysy,因此等价于matrix(sx,0,0,sy,0,0);。例如scale(0.5, 1.5);等价于matrix(0.5,0,0,1.5,0,0);

位移和缩放比较简单,rotate旋转将元素旋转一个角度稍微复杂点。旋转后各像素的新坐标需要为x1=cos(a)x-sin(a)y,y1=sin(a)x+cos(a)y,因此等价于matrix(cos(a),sin(a),-sin(a),cos(a),0,0);。例如rotate(45deg);等价于matrix(0.53,0.85,-0.85,0.53,0,0);(cos(45)=0.53,sin(45)=0.85)

skew扭曲后各像素新坐标需要为x1=x+tan(ax)y,y1=tan(ay)x+y,因此等价于matrix(1,tan(ay),tan(ax),1,0,0);。例如skew(45deg);等价于matrix(1, 0, 1, 1, 0, 0);(tan(45)=1)


translate(tx, ty);  matrix(1, 0, 0, 1, tx, ty);

scale(sx, sy);  matrix(sx, 0, 0, sy, 0, 0);

rotate(a);  matrix(cos(a), sin(a), -sin(a), cos(a), 0, 0);

skew(ax, ay);   matrix(1, tan(ay), tan(ax), 1, 0, 0);

你可能会疑惑,谁会放着现成的transform内置函数不用,去用matrix/matrix3d?除非你故意不想让他人看懂代码,你可以将

transform: rotate(15deg) translate(230) scale(1.5,2.6) skew(220deg,-150deg) translate(230px);

写成

transform: matrix(1.06,1.84,0.54,2.8,466px,482px);

保证你的代码谁也看不懂谁也改不了,知识产权那是妥妥的,公司辞退谁都不会辞退到你。但恕我才疏学浅,除了满足个人好奇心,体会到一点智商上的优越感外,实际项目中似乎确实没什么卵用…本篇您就当看个乐呵

transition从效果上看是一种平滑过渡的动画,本质上是在线性时间内将属性从开始值过渡到结束值。例如获得焦点,点击鼠标等动作导致CSS属性值的变化是瞬间完成的,感觉有点生硬。用transition可以指定在某时间段内将属性值平滑过渡,增强用户体验

4个子属性

transition-property
transition-duration
transition-timing-function
transition-delay

transition-property指定需要过渡的CSS属性。并不是所有属性都能过渡的,只有能数字量化的CSS属性才能过渡。哪些属于能数字量化的CSS属性呢?例如:

颜色系,如color,background-color,border-color,outline-color等

数字系,实在太多了,如width,height,top,right,bottom,left,line-height,background-position,word-spacing,font-weight,vertical-align,outline-outset,z-index,zoom,opacity等。

01系,如visibility(0表示隐藏,1表示显示)

除了单个指定属性外,transition-property还能设为all,表示所有属性都将获得过渡效果。

transition-duration过渡需要的时间,单位可指定s秒,也可指定ms毫秒。默认值是0,表示立刻变化。如果设置了多个过渡属性,但每个属性的过渡时间都一样,你没必要为transition-duration设多个值,只有设一个即可,该值会应用到所有过渡属性上。

transition-timing-function过渡函数,有linear,ease,ease-in,ease-out,ease-in-out,cubic-bezier(n,n,n,n),steps。其实它们都是贝赛尔曲线。如下


看贝赛尔曲线就知道了,linear是匀速过渡,ease是先快再慢的节奏,ease-in是加速冲刺的节奏,ease-out是减速到停止的节奏,ease-in-out是先加速后减速的节奏

现在动画的精度越来越高,如果预定义好的这些函数满足不了你的需求,可以通过cubic-bezier(n,n,n,n)自定义平滑曲线。从上面的图形中观察到,贝塞尔曲线有4个点,左下为起始点P0坐标固定为(0,0),右上为终点P3坐标固定为(1,1),中间有两点P1和P2的坐标就是cubic-bezier(n,n,n,n)的参数。通过4条连起来的直线,生成平滑的曲线。一图胜千言

steps函数有两个参数,第一个参数是分割的数量,第二个参数可选,是关键字start,end,不设的话默认是end。因此steps(4, start)等价于step-start(4),steps(4, end)等价于step-end(4)。例如steps(4, end)并非像贝塞尔曲线那样平滑过渡,相当于将过渡过程从头至尾分成4步,在每一步瞬间完成过渡。最上面的例子中已经有所展示,很容易理解

transition-delay延迟开始过渡的时间,默认值是0,表示不延迟,立即开始过渡动作。单位是s秒或ms毫秒。w3cschool上没说的是,该属性还能设负时间,意思是让过渡动作从该时间点开始启动,之前的过渡动作不显示。不信你可以试试。负延迟时间在animation动画里确实有用,但恕我才疏学浅,在transition里实在不知道有什么卵用

你可以单独指定这4个子属性,也可以像background等属性一样,合并在transition属性里指定。但合并时要注意,因为有transition-duration和transition-delay都是时间,浏览器会根据先后顺序,将第一个时间认作为transition-duration,第二个时间认作为transition-delay

是分开或者合并指定并无标准答案。分开指定可能代码易读性高一点。但当页面需要适应各浏览器时,每个都要加上-ms-,-moz-等前缀,代码会变的很多,合并在一起代码稍微少点。另外也可以同时指定多个过渡效果,例如transition: background 1s linear 2s, border-radius 2s ease-in 3s

常见的就是伪类触发:hover,:focus,:active,:checked等。还有例如@media媒体查询,根据设备大小,横屏竖屏切换时触发。还有如click,keydown等JS事件触发。页面加载也能触发就不一一列举了。总之过渡的本质是在时间段内平滑过渡属性值,与怎么触发没有关系

transition既然涉及时间,自然就有事件。参照MDN有transitionend事件,顾名思义就是过渡结束时触发该事件。但该事件比较坑。例如过渡padding时,代码如下

#tempDiv {
    padding: 1px;
    transition-property: padding;
    transition-duration: 1s;
}
#tempDiv:hover {
    padding: 5px;
}
function showMessage() {
    console.log('finished');    //过渡结束时触发打印log
}
var element = document.getElementById("tempDiv");
element.addEventListener("transitionend", showMessage, false);

你可以代码贴到浏览器里试试,结果出现4条log。因为过渡属性指定的是padding,所以在padding-top,padding-right,padding-bottom,padding-left过渡结束时均触发了transitionend事件。因此log被打印了4次。

如果上述CSS中将transition-property: padding;改为all,同样会触发4次。除非你改成transition-property: padding-top;这样才能只触发一次,但现实中只过渡一边的场景非常少,通常都是4边同时过渡,因此例如padding,margin,border之类的属性,用transitionend事件会有多次捕捉的情况发生。

ransition过渡时有时会出现一些比较暧昧的情形,比如设成em的属性,如你所知em是根据font-size来计算的。类似还有rem,vh,vw等都是根据另一个属性的值来计算得到它的值。举个例子padding:2em;,如果font-size被改变了,此时padding的“书面值”不变,仍旧是2em,但“实际值”将会发生变化并触发transition过渡。这被称作“隐式过渡”。多数浏览器会实现隐式过渡,但传闻IE很特别,具体有多特别我也没试过

开关过渡,顾名思义就是触发源的事件结束后会恢复到原始状态。永久过渡就是过渡后不恢复到原始状态。上面的例子都是开关过渡,当鼠标hover事件结束后,图片恢复原始尺寸。但永久过渡的话,鼠标hover事件结束后,图片仍旧保持放大后的尺寸。

//开关过渡,可以恢复原状态
.transition { 
    transition: all 1s ease-in-out;
}
.transition:hover {
    transform: scale(1.5);
}
//永久过渡,不能恢复到原状态
.forever { 
    transition: all 1s ease-in-out 999999s;
}
.forever:hover { 
    transform: scale(1.5);
    transition: all 1s ease-in-out;
}

因为回到原始尺寸的transition-duration被设成了一个很大的时间,999999s差不多有12天,理论上你页面开12天就能看到关闭过渡的效果,但现实等于永久过渡。该技巧无需任何JS脚本

通常我们属性过渡时,都是定值到定值的过渡,例如width:100px过渡到200px。但要过渡到width:auto就不行了。就算你指定transition: width 1s linear;会发现根本不会有1秒的平滑的过渡效果,而是瞬间完成过渡

.div1 {
    background-color: red;
    width: 100px;
    height: 50px;
}
#box1:hover {
    width: auto;
    transition: width 1s linear;
}
<div id="box1" class="div1"></div>

如果想要过渡效果,必须将auto转换为固定值。那么问题来了,如何转换呢?需要靠JS,通过getComputedStyle获取auto后的固定值后,通过style设置该值,然后再触发CSS的过渡效果。

鼠标hover后,用JS模拟过渡效果

window.onload = function(){
    var box = document.getElementById("box2"),
        originWidth = box.clientWidth,
        width2AutoLater = null,
        width2OriginLater = null;

    var width2Auto = function(element, time) {
        if (typeof window.getComputedStyle == "undefined") return;
        
        var width = window.getComputedStyle(element).width;
        element.style.width = "auto";
        var targetWidth = window.getComputedStyle(element).width;
        element.style.width = width;
        setTimeout(function() {
            element.style.transition = "width "+ time +"ms linear";
            element.style.width = targetWidth;
        }, 10);
    };

    var width2Origin = function(element, time) {
        setTimeout(function() {
            element.style.transition = "width 0s linear";
            element.style.width = originWidth + "px";
        }, 10);
    };

    function callLater(func, paramA, paramB){  
       return function(){  
            func.call(this, paramA, paramB);  
        };  
    }  

    width2AutoLater = callLater(width2Auto, box, 1000);
    width2OriginLater = callLater(width2Origin, box, 1000);

    box.addEventListener("mouseenter", width2AutoLater);
    box.addEventListener("mouseleave", width2OriginLater);
}
<div id="box2" class="div1"></div>

思路:给div注册了mouseenter和mouseleave事件来模拟hover效果。

mouseenter绑定width2Auto函数,函数里临时将div的width设为auto后,用getComputedStyle得到宽度值,将该宽度值和transition设进该div的style里。

mouseleave绑定width2Origin函数,函数里将div的width改回初始值。

因为注册事件的函数addEventListener的第二个参数是回调函数名,不能给回调函数传参数。因此使用闭包的特性,定义了callLater中间函数,函数里通过call调用上述两个函数

animation:
transition过渡属性通过让属性在时间段内根据贝塞尔曲线平滑过渡,呈现出动画效果,但毕竟功能有限。本篇介绍的animation属性和传统的动画制作一样,能控制帧的每一步,制作出更强大的动画效果

子属性:

animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
animation-play-state
animation-fill-mode
@keyframes

animation-name指定@keyframes的名字,CSS加载时会应用该名字的@keyframes规则来实现动画

animation-duration动画持续时间,默认是0表示无动画,单位可以设s秒或ms毫秒

animation-timing-function动画播放方式,默认值ease,可以设linear,ease,ease-in,ease-out,ease-in-out,cubic-bezier(n,n,n,n),steps。关于贝塞尔曲线和steps可以参照上一篇transition,和transition-timing-function类似,不多赘述。

animation-delay延迟开始动画的时间,默认值是0,表示不延迟,立即播放动画。单位是s秒或ms毫秒。允许设负时间,意思是让动画动作从该时间点开始启动,之前的动画不显示。例如-2s 使动画马上开始,但前 2 秒的动画被跳过。

animation-iteration-count动画循环播放的次数,默认值为1,即放完一遍后不循环播放。除数字外也可以设关键字infinite表示无限循环播放。

animation-direction动画播放的方向,可设normal,alternate,alternate-reverse。默认值是normal表示正常播放动画。alternate表示轮转正反向播放动画,即动画会在奇数次(1,3,5…)正常播放,而在偶数次(2,4,6…)反向播放。alternate-reverse正好反过来,奇数次反向播动画,偶数次正向播动画

.myDiv1 {
    width: 75px;
    height: 75px;
    background-color: red;
    position:relative;
    animation:aDirection 5s infinite;
} 
@keyframes aDirection {
    from {left:0px;}
    to {left:200px;}
}
.alter { animation-direction:alternate; }
.alterR { animation-direction:alternate-reverse; } 

<div class="myDiv1"></div>
<div class="myDiv1 alter"></div>
<div class="myDiv1 alterR"></div> 

其实例子页面就能看到alternate/alternate-reverse的动画效果可以平滑地实现反转效果。例如例子页面中闪烁提示的例子。你可以用text-decoration: blink来实现闪烁,但它的功能有限支持有限。用CSS3动画实现的闪烁效果更棒。(当然闪烁的使用必须克制,要定时定次数,不能无限闪。无限闪通常会让用户很生气后果很严重):

@keyframes blink { 
    to { color: transparent }  //文字色平滑过渡到透明
}
.blink {
    animation: .5s blink 6;    //触发动画6次,因为设了alternate,所以看上去闪烁了3次
    animation-direction: alternate;
}

animation-play-state动画的状态,可设running,paused。默认值running表示正在播放动画,paused表示暂停动画。通常在JS端使用该属性object.style.animationPlayState=”paused”来暂停动画。

animation-fill-mode动画的时间外属性,可设none,forwards,backwards,both。默认值none表示动画播完后,恢复到初始状态。forwards当动画播完后,保持@keyframes里最后一帧的属性。backwards表示开始播动画时,应用@keyframes里第一帧的属性,要看出效果,通常要设animation-delay延迟时间。both表示forwards和backforwards都应用

例如设置2s的延迟时间。初始为红色,第一帧动画变为绿色,最后一帧动画变为蓝色

.myDiv2 {
    width: 75px;
    height: 75px;
    background-color: red;
    position:relative;
    animation:mymove 5s 1 2s;
}
@keyframes mymove {
    from {left:0px; background-color:green;}
    to {left:200px; background-color: blue;}
}
.forwards { animation-fill-mode:forwards; }
.bkforwards { animation-fill-mode:backwards; }
.both { animation-fill-mode:both; } 

<div class="myDiv2"></div>
<div class="myDiv2 forwards"></div>
<div class="myDiv2 bkforwards"></div>
<div class="myDiv2 both"></div>

图1不解释了,最正常的效果,初始为红色,动画开始成绿色,动画结束成蓝色,结束后恢复初始状态红色。图2设成forwards,和图1的区别是动画结束后不恢复初始状态,仍旧是蓝色。图3设成backwards,在动画开始前(即延迟时间段内)应用第一帧的动作,设成了绿色,动画结束后恢复原始状态。图4设成both兼具forwards和backwards的效果

@keyframes动画帧就是区别animation和transition的关键。在transition中是无法更细致地控制时间段内执行的动作的,而在animation中用@keyframes可以细致地指定第一帧要干什么,第二帧要干什么

语法:@keyframes开头,后接animation-name。实体内可以创建%百分比来划分时间段。关键字from等于0%,to等于100%

@keyframes mymove {
    0%   {top:0px; left:0px; background:red;}
    25%  {top:0px; left:100px; background:blue;}
    50%  {top:100px; left:100px; background:yellow;}
    75%  {top:100px; left:0px; background:green;}
    100% {top:0px; left:0px; background:red;} 
}

你可以单独指定上面这些子属性,也可以像background等属性一样,合并在animation属性里指定。例如animation: moveten 1s step(10,end) infinite alternate 3s backwards;。但合并时要注意,因为有animation-duration和animation-delay都是时间,浏览器会根据先后顺序,将第一个时间认作为animation-duration,第二个时间认作为animation-delay。

分开指定可能代码清晰点,但因为页面需要适应各浏览器时,每个都要加上-ms,-moz等前缀的话代码会变的很多,合并在一起代码稍微少点。

另外也可以同时指定多个动画效果,例如animation: moveten1 1s ease .5s, moveten2 2s ease 1s forwards;

写几个demo来实践一下:
正负旋转相消3D动画
loading

简单来说,浏览器为了提升动画的性能,为了在动画的每一帧的过程中不必每次都重新绘制整个页面。在特定方式下可以触发生成一个合成层,合成层拥有单独的 GraphicsLayer。

需要进行动画的元素包含在这个合成层之下,这样动画的每一帧只需要去重新绘制这个 Graphics Layer 即可,从而达到提升动画性能的目的。

那么一个元素什么时候会触发创建一个 Graphics Layer 层?从目前来说,满足以下任意情况便会创建层:

  • 硬件加速的 iframe 元素(比如 iframe 嵌入的页面中有合成层)
  • 硬件加速的插件,比如 flash 等等
  • 使用加速视频解码的 元素
  • 3D 或者 硬件加速的 2D Canvas 元素
  • 3D 或透视变换(perspective、transform) 的 CSS 属性
  • 对自己的 opacity 做 CSS 动画或使用一个动画变换的元素
  • 拥有加速 CSS 过滤器的元素
  • 元素有一个包含复合层的后代节点(换句话说,就是一个元素拥有一个子元素,该子元素在自己的层- 里)
  • 元素有一个 z-index 较低且包含一个复合层的兄弟元素

参考链接:

理解矩阵乘法

CSS3 transform介绍

CSS3 matrix – martix3d介绍

transform系列介绍

CSS3 animation介绍

CSS3 transition介绍

你所不知道的 CSS 动画技巧与细节

推荐阅读更多精彩内容

  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
  • 接了任务一直犯拖延症,一直拖到现在才开始做任务,先say 个sorry。这篇文章主要说网页动画的,侧重的是CSS3...
  • CSS 中的 transform,transition 和 animation 是分开的三部分内容,其中 tran...
  • CSS 中的 transform,transition 和 animation 是分开的三部分内容,其中 tran...