css --- 动画

1、@keyframes 规则

最少需要两项属性：名称和时长。

animation-name: 动画名称；
animation-duration: 动画完成一个周期所花费的时间，默认为0；
animation-timing-function: 规定动画的速度曲线（缓动函数），默认为“ease”；
animation-delay: 规定动画何时开始，默认为0；
animation-iteration-count: 规定动画被播放的次数，默认为1；
animation-direction: 规定动画是否在下一个周期，逆向的播放，默认为“normal”；
animation-play-state: 规定动画是否在运行或暂停，默认为“running”；
animation-fill-mode: 动画时间之外的状态。

2、transform

CSS3 中的 transform (变形)属性用于内联元素和块级元素，可以旋转、扭曲、缩放、移动元素，它的属性值有以下五个：旋转(rotate)、扭曲(skew)、缩放(scale)和移动(translate)以及矩阵变形(matrix)；

3、transition

transition-property: css 属性名称；
transition-duration: 规定完成过渡动效需要多长时间；
transition-timing-function: 规定速度效果的速度曲线；
transition-delay: 规定过渡效果何时开始。

4、requestAnimationFrame

requestAnimationFrame 是浏览器用于定时循环操作的一个接口，类似于setTimeout，主要用途是按帧对网页进行重绘。

设置这个API的目的是为了让各种网页动画效果（DOM动画、Canvas动画、SVG动画、WebGL动画）能够有一个统一的刷新机制，从而节省系统资源，提高系统性能，改善视觉效果。代码中使用这个API，就是告诉浏览器希望执行一个动画，让浏览器在下一个动画帧安排一次网页重绘。

requestAnimationFrame 的优势，在于充分利用显示器的刷新机制，比较节省系统资源。显示器有固定的刷新频率（60Hz或75Hz），也就是说，每秒最多只能重绘60次或75次，requestAnimationFrame 的基本思想就是与这个刷新频率保持同步，利用这个刷新频率进行页面重绘。此外，使用这个API，一旦页面不处于浏览器的当前标签，就会自动停止刷新。这就节省了CPU、GPU和电力。

不过有一点需要注意，requestAnimationFrame是在主线程上完成。这意味着，如果主线程非常繁忙，requestAnimationFrame的动画效果会大打折扣。

requestAnimationFrame 使用一个回调函数作为参数。这个回调函数会在浏览器重绘之前调用。
requestID = window.requestAnimationFrame(callback);

使用requestAnimationFrame的时候，只需反复调用它即可：

function repeatOften() {
    // Do whatever
    requestAnimationFrame(repeatOften);
}

requestAnimationFrame(repeatOften);

取消重绘可以用 cancelAnimationFrame：

window.cancelAnimationFrame(requestID);

不支持的时候，可以这样模拟：
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function( callback ){
    window.setTimeout(callback, 1000 / 60);
};
})();

个人统计【2】：2019-05-26、2019-05-27