结束状态。没有它们，我们将无法定义插值状态，从而填补了两者之间的空白。
帧：连续变换的多张画面，其中的每一幅画面都是一帧。
帧率：用于度量一定时间段内的帧数，通常的测量单位是FPS (frame per second)
帧率与人眼：一般每秒10-12帧人会认为画面是连贯的，这个现象称为视觉哲留。对于一些电脑动画和游戏来说低于30FPS会感受到明显卡顿，目前主流的屏幕、显卡输出 为60FPS，效果会明显更流畅。
空白的补全方式有以下两种
补间动画：传统动画，主画师绘制关键帧，交给清稿部门，清稿部门的补间动画师补充关键帧进行交付。
(类比到这里，补间动画师由浏览器来担任，如keyframe, transition)
逐帧动面 (Frame By Frame)：从词语来说意味着全片每一帧逐帧都是纯手绘。
（如CSS的steps实现精灵动画）
前端动画分类
CSS animation是常见的CSS动画实现方式
CSS animation 属性是 animation-name, animation-duration, animation-timing-function, animation-delay, animation-
iteration-count, animation-direction, animation-fill-mode 和animation-play-state 属性的一个简写属性形式。
CSS动画
animation-name
属性指定应用的一系列动画，每个名称代表一个由@kevframes定义的动画序列。
animation-name: none | Ident
none: 无动画
ident 标识动画的字符串，由大小写敏感的宇母az、
数字0-9、下划线（和/或横线（一）组成。第一个非横线字符必须是字母，数字不能在字母前面，不允许两个横线出现在开始位置
animation-duration
属性指定一个动画周期的时长。（默认值为Os，表示无动画)可以有多个值
animation-timing-function
属性定义CSS动画在每一动画周期中执行的节奏。
animation-delay
CSS属性定义动面于何时开始，即从动画应用在元素上
到动画开始的这段时间的长度。
animation-iteration-count
Css 属性 定义动画在结束前运行的次数可以是1次、无限循环.
值为关键字
指定多个值
animation-direction
Css 属性指示动画是否反向播放。
animation-direction: normal
animation-direction: reverse
animation-direction: alternate
animation-direction: alternate-reverse
animation-direction: normal, reverse
animation-direction: alternate, reverse, normal
CSS 属性
animation-fill-mode
设置CSS动画在执行之前和之后如何将样式应用于其目标。
/* Single animation* /
animation-fill-mode: none:
animation-fill-mode: forwards:
animation-fill-mode: backwards;
animation-fill-mode: both;
/* Multiple animations */
animation-fill-mode: none, backwards;
animation-fill-mode: both, forwards, none;
animation-play-state
Css 属性定义一个动画是否运行或者暂停。可以通
过查询它来确定动画是否正在运行。另外，它的值可以被设置为暫停和恢复的动画的重放。
CSS的形体变换 - Transform API
*只能转换由盒模型定位的元素。根据经验，如果元素具有display: block，则由盒模型定位元素。
transform-origin指定原点的位置。默认值为元素的中心，可以被移动。很多变形需要用到这个属性，比如旋转，缩放和倾斜，他们都需要一个指定的点作为参数。
Translate （移动）
该变换由二维向量构成。它的坐标定义了元素在每个方向上移动了多少。
scale（缩放）
沿x缩小为50% //transform: scale(0.5);
沿x缩小为50%，沿y周放大为之前的2倍//transform: scale(0.5, 2);
rotate（旋转)
以物体中心为基础
skew（倾斜）
参数表示倾斜角度，单位deg
一个参数时：表示水平方向的倾斜角度；
两个参数时：第一个参数表示水平方向的倾斜角度，第二个参数表示垂直方向的倾斜角度。
首先需要说明的是skew的默认原点transform-origin是这个物件的中心点
CSS实现补间动面 (Transition API、Keyframe)
Transition API （过渡动画）
dom加载完成或class发生变化时触发。
transition-property
指定哪个或哪些 CSS 属性用于过渡。
transition-duration
指定过渡的时长。
transition-timing-function
指定一个函数，定义属性值怎么变化。
transition-delay
指定延迟，即属性开始变化时与过渡开始发生时之间的时长。
keyframe实现动画
：
关键帧 @keyframes at-rule 规则通过在动画序列中定义关键帧（或waypoints） 的样式来控制CSS动画序列中的中间步骤。和转换 transition相比，关键帧keyframes 可以控制动画序列的中间步骤。
CSS逐帧实现动画
CSS动画的
优点：简单、高效 声明式的 不依赖于主线程，采用硬件加速 (GPU〕 简单的控制keyframe animation播放和暂停。
缺点：不能动态修改或定义动画内容 不同的动画无法实现同步、多个动画彼此无法堆叠。
适用场景：简单的h5活动/宣传页。
推荐库：animation.css、 shake.css等。
SVG动画
svg是基于xML的矢量图形描述语言，它可以与CSS和JS较好的配合，实现svg动画通常有三种方式：SMIL Js、CSS
SMIL : Synchronized timedia Intearation Language (同步多媒体集成语言)
使用JS 来操作 SVG 动画自不必多说，目前也有很多现成的类库。例如老牌的 Snap.svg 以及anime.js，都能让我们快速制作 SVG 动画。当然，除了这些类库，HTML 本身也有原生的 Web Animation 实现。使用 Web Animation 也能让我们方便快捷地制作动画。
文宇形变：
codepen.io/iangxiang/p…
Path实现写宇动面：
codepen.io/iiangxiang/…
fiter
CSS属性将模糊或颜色偏移等图形效果应用于元素
JS笔画的原理
stroke-dashoffset、stroke-dasharray配合使用实现笔画效果。
属性stroke-dasharray可控制用来描边的点划线的图案范式，它是一个数列，数与数之间用逗号或者空白隔开，指定短划线和缺口的长度。如果提供了奇数个值，则这个值的数列重复一次，从而变成偶数个值。
因此，5,3,2等同于5,3,2,5,3,2，
stroke-dashoffset 属性指定了dash模式到路径开始的距离
path路径 -d属性(路径描述）
*大写字母跟随的是绝对坐标xy，小写为相对坐标dx,dy
M/m绘制起始点。
L/l绘制一条线段。
C/c为绘制贝塞尔曲线。
Z/z将当前点与起始点用直线连接。
计算path的长度 - path.getTotalLength()
计算path上某个点的坐标-path.getPointAtLength(lengthNumber);
SVG我们经常使用animation, transform, transition来实现动画，它比JS更
加简单方便。
优点：通过矢量元素实现动画，不同的屏幕下均可获得较好的清晰度。
可以实现一些特殊的效果：描宇，形变，墨水扩散等。
缺点：使用方式较为复杂，过多使用可能会带来性能问题。
JS可以实现复杂的动画，也可以操作canvas动画API上进行绘制。
优缺点分析
CSS优点：
浏览器会对CSS3动画做一些优化，导致CSS3动画性能上稍有优势(新建一个图层来跑动画）。
-CSS3动画的代码相对简单。
CSS缺点：
动画控制上不够灵活。
兼容性不佳。
部分动画无法实现（视差效果、滚动动画)
JS优点：
使用灵活，同样在定义一个动画的keyframe序列时，可以根据不同的条件调节若干参数（JS动画函数）改变动画方式。(CSS会有非常多的代码冗余）
对比与CSS的keyframe粒度更粗，css本身的时间西数是有限的，这块JS都可做弥补。
CSS很难做到两个以上的状态转化 （要么使用关键帧，要么需要多个动画延时触发，再想到要对动画循环播放或暂停倒序等，复杂度极高
JS缺点：
使用到IS运行时，调优方面不如CSS简单，CSS调优方式固定
对于性能和兼容性较差的浏览器，CSS可以做到优雅降级，而Js需要额外代码兼容。
当为 UI元素采用较小的独立状态时，使用 CSS。
在需要对动画进行大量控制时，使用JavaScript.
在特定的场景下可以使用SVG，可以使用CSS或JS去操作SVG变化。
粉丝
