css动画
看了很多视频、文章，最后却通通忘记了，别人的知识依旧是别人的，自己却什么都没获得。此系列文章旨在加深自己的印象，因此此系列文章大都是将别人的文章连复制带写而来，若有侵权，请及时通知，必定立即删除。
首先回顾一下矩阵，为后面学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"></div>
<div class="div1 p3d"></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);
}
从图中也可以看出，烤羊肉串就是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"></div>
<div class="divsp"></div>
<div class="divsp"></div>
<div class="divsp"></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">
</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，是见一个覆盖一个
//左图
//右图
左图因为第一张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 较低且包含一个复合层的兄弟元素
参考链接：
