004 - CSS3动画和JS动画基础篇

1. CSS3动画

1.1 transition过渡

• CSS过渡本质上是对用户界面效果的一种增强手段，是指在一段时间内将Css样式的初始值变成另外一个值。更确切的说，这种状态的改变是对元素某种操作的响应，通常是由用户交互触发的，但是也可以使用JS脚本进行触发。
• css属性值的变化是在瞬间(毫秒级)完成的，多数情况下整个过程不会超过16毫秒(变换背景图由于需要解码并重新绘制页面可能需要大于16毫秒，而这种情况显然已经不属于过渡了)。
• 另外需要说明的是过渡必须需要页面将当前元素渲染结束后才会产生效果。也就说由于元素的渲染比元素样式变换更加耗时，则当元素原本是隐藏的，原本目标是将元素重新渲染为显示时，进而立刻进行修改元素样式，但transition是在元素渲染结束后才会产生效果的，故此时不会出现transition动画效果。如果想此时transition也出现动画效果，那需要先更改浏览器渲染机制了。
• 过渡是写在某种操作之前style中的，当触发了这个特定操作，元素样式的变换过程受过渡属性设置限制，但最终结果并与之前的直接样式变化没有发生改变。默认是没有过渡效果的，若使用了过渡，后又不需要，可以禁止。

1.1.1 过渡的属性

过渡有transition-property、transition-duration、transition-timing-function、transition-delay四个属性，当然过渡也提供了transition简写。

• transition-property
  用于指定想使用过渡效果的css属性，这里分为none，all和其他css属性。none是禁止所有属性使用过渡效果（默认），all是指对当前元素的所有css属性添加过渡效果，其他css属性是特指css属性，另外可以是变换transform。
  需要注意的是，并不是所有的css属性都有机会享有这份殊荣的，这里暂时不具体详细列出属性列表，支出动画的属性列表本身也在不断的增加新成员，但是还有规矩可寻的。判断属性是否支持动画的关键是确定其取值是够能够在两个数据点之间插入一个数据点，简单来说就是如果属性值只能是关键字，而不能是计算为某种数值时，是不能使用动画效果的，相反能使用。关于属性值是如何实现在两个数据点之间插入一个数据点的详细叙述，有机会再写。
  transiton-property:attr1,attr2,...,attrn;
• transition-duration
  用于指定从一个状态过渡到另一个状态需要经历多久，即过渡持续时间长度，单位可以是秒或毫秒，默认0S。
  若两个状态生命的transition-duration不一致，在保证声明正确的情况下以目标状态声明为准。
  值必须是大于等于零，过渡效果不起作用，即不触发transitionend事件。
  transition-duration若只有一个值，是对声明过渡效果的所有属性添加同一个过渡时间，若添加多个值且与应用过渡效果的css属性个数相同时，则一一对应，否则根据个浏览器指定的规则处理，时间值多是，多的不起作用，时间值少时重复循环使用。
  transition-duration:0s,100ms,...,200ms;
• transition-timing-function
  用于指定过渡效果的速度和加速度问题，控制过渡的步调，初始值ease。
  可以取的值有ease、linear、ease-in、ease-out、ease-in-out、step-start、step-end、step(步进的次数n,start)，当然也可以直接使用贝塞尔曲线函数cubic-bezier(x1,y1,x2,y2)，四个参数描述了贝塞尔曲线的横轴和纵轴。
  transition-timing-function:ease;
• transition-delay
  用于指定对过渡效果的延迟执行时间长度，默认为0s，单位为s或ms，数量和效果类似transition-duration。
  transition-delay:0s,...,0s;
• transition事件
  无论何种css属性过渡效果都会最终触发transitionend事件，需要注意的是有时看起来单个属性的声明，却会触发多个transitionend事件，这是因为简写属性中的每个支持动画的属性有各自的transitionend事件，例如添加了border-radius过渡效果，却调用了四次transitionend事件，这是因为border-radius有四个单独属性border-bottom-left-radius/border-bottom-right-radius/border-top-left-radius/border-top-right-radius四个简写形式。
  另外需要注意的是这个事件不能通过el.ontransitonend = (e)=>{};方式添加transitionend事件，而是需要使用el.addEventListener('transitioned',(e) => {});添加这一事件。
  transitionend事件有三个与该事件有关的属性：结束过渡的css属性名称的e.propertyName、过渡持续时间(单位秒)的e.elapsedTime以及若应用效果的伪元素(普通DOM节点返回空字符串)的e.pseudoElement。
• transition简写
  transition:attr1 0s 0s ease,...,attr2 0s 0s linear;

1.1.2 反向过渡：退回起点

当触发过渡事件结束后，各属性通过相同的过渡回到默认属性，延迟相同，但是transition-timing-function是相反的。

1.2 animation动画

如果想为元素添加animation动画，必须需要定义一个关键帧。

1.2.1 定义动画帧

@keyframes name{
   
	from{
   /*动画开始时的元素样式状态*/}
	to{
   }
	...
	to{
   /*最后一个表示动画结束时的元素样式状态*/}
}
// 当然，也可以使用百分比实现过程的精细化定义，
// 当没有定义from或0%的时候，默认从元素计算后属性开始
// 当没有定义to或100%的时候，默认动画结束时状态为元素计算后属性
// 当动画结束后，元素状态将会回到行间样式，即计算后属性，也就是元素渲染后的样式

1.2.2 将动画应用到元素上

一种是单独声明各个属性，一种是使用animation简写属性一次性声明全部属性，当然这两种方式可以混着使用。

• animation-name
  指定动画帧的名字，默认值为none，即没有任何动画效果
  animation-name:name1,...,namen;
  -animation-duration
  指定动画执行时间,默认0s,单位为秒或毫秒。
  animation-duration:0s,..,0s;
• animation-iteration-count
  指定动画执行的次数，默认1。
  animation-iteration-count:0,..,infinite;
• animation-direction
  指定动画是从0%关键帧向100%关键帧播放还是从100%关键帧向0%关键帧播放。也可以定义所有多次执行动画都按照相同的方向执行，或者是每隔一次循环变一次方向。默认normal,可填写reverse、alternate、alternate-reverse。
  animation-direction:normal,...,normal;
• animation-delay
  动画延迟多长时间执行。默认是0s,单位是s或ms。
  animation-delay:0s,...,0s;
• 动画事件
  与animation动画相关的事件有animationstart、animationiteration、animationend三个，每个事件都有animationName、elapsedTime和pseudoElement三个只读属性。