[前端] CSS 动画属性: animation与transition

CSS transition 是做什么的

CSS transition 可以设置属性变化的过程，给页面赋予的效果是属性状态间的改变，这个过渡叫做隐式过渡（implicit transitions）

简单来说，transition的可选项帮助我们实现以下功能:
哪些属性发生动画效果 (明确地列出这些属性)
何时开始 (设置 delay）
持续多久 (设置 duration)
如何动画 (定义timing function，比如匀速地或先快后慢)。

CSS可动画属性

不管是transition还是animation，都只能改变CSS可动画属性列表里的属性
详情见: https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_animated_properties

简写后的transition声明语法如下
：

div {
    transition: <property> <duration> <timing-function> <delay>;
}

展开后：

div {
    transition-property: <property>;
    transition-duration: <duration>; 
    transition-timing-function: <timing-function>;
    transition-delay: <delay>;
}

这四个参数是合着写的最常使用的两个子属性是property和duration，其中property是待变换的CSS属性; duration是过渡（也就是产生的平滑动画）的持续时间。

timing function这个属性，比其他三项复杂一些。这个函数定义了我们设定的属性值在duration时间内如何变化的。常见的函数名有ease，linear，ease-in，ease-out，不过其实这些都可以由贝塞尔曲线定义，比如linear就可以用 cubic-bezier(0,0,1,1) 来表示，下面介绍一下控制timing fucntion的三阶贝塞尔曲线。

Cubic-bezier 三阶贝塞尔曲线

三阶贝塞尔曲线图

简单理解，三次贝塞尔曲线就是通过在设定好的(0,0)到(1,1)为对角线的正方形函数图中加入两个控制坐标（每个控制坐标有x y轴数值，也就是4个控制点），来决定物体的速度变化曲线（注意，斜率才是速度）。
这里涵盖了Ease属性通过贝塞尔曲线控制变换的所有API: https://easings.net/

除了贝塞尔曲线，CSS还为transition/animation提供了一种多段变换函数：steps()。这个函数在这篇文章里有很详细的解释：https://segmentfault.com/a/1190000007042048。

最后一个属性是delay，也很容易理解，它指定了transition的延迟，即属性开始变化时与过渡开始发生时之间的时长。

我们可以通过transitionend事件来监听过渡是否完成

el.addEventListener("transitionend", updateTransition, true);

总的来说，transition代表当属性在DOM事件(click)或伪类事件(:hover)变化时，我们如何让CSS属性效果变换的更平滑。

CSS animation 是做什么的？与transition有什么区别

animation是真正意义上给予CSS动画功能的api，它比transition更加复杂，实现更多的功能，关键就在于我们可以引入由@keyframes引入的关键帧样式。

以一个简单的例子介绍animation的子属性和keyframes：

div {
    animation-delay: 3s; // 延时时间，从元素加载成功到开始动画;
    animation-direction: alternative; // 设置动画在每次运行完后是反向运行还是重新回到开始位置重复运行;
    animation-duration: 3s; // 设置动画一个周期的时长;
    animation-iteration-count: infinite; //设置动画重复次数，可以指定infinite无限重复;
    animation-name: slideIn; // 指定由@keyframes 规则描述的关键帧名称;
    animation-play-state: running// 允许暂停和恢复动画;
    animation-timing-function: linear; // 时间函数，与transition的类似;
    animation-fill-mode: forwards; // 指定动画执行前后如何为目标元素应用样式;
}

@keyframes slideIn {
  from { // 开始，也可以写成 0%
    margin-left: 100%;
    width: 300%; 
  }
  to { // 结束，也可以写成100%
    margin-left: 0%;
    width: 100%;
  }
}

可能很容易发现，keyframes区别于transition的方式，因为我们可以在keyframes中设定不同关键帧的样式，变化的方式及过程数值都是由我们自定义的。

使用动画事件

利用动画事件可以更好的控制动画和信息。这些事件由AnimationEvent对象表示，可探测动画何时开始结束和开始新的循环。每个事件包括动画发生的时间和触发事件的动画名称。

var e = document.getElementById("watchme");
e.addEventListener("animationstart", listener, false);
e.addEventListener("animationend", listener, false);
e.addEventListener("animationiteration", listener, false);

e.className = "slidein"; // 由设置className来触发动画

CSS动画优势

整体而言，我们应该尽量多使用CSS动画，因为CSS动画是直接基于GPU进行渲染的，省去了js主线程的计算过程。
推荐一篇详细解释了GPU动画原理的博客：https://segmentfault.com/a/1190000008015671
英文原文：https://www.smashingmagazine.com/2016/12/gpu-animation-doing-it-right/