CSS3动画

构建CSS3动画的主要方式有transform(变形)，transition(过渡)，animation(动画)三种

CSS动画

在开始之前：先比较一下CSS动画和JS动画的优缺点

CSS动画：

优点：
1、写法简单、高效
2、不依赖于主线程，可采用硬件加速（GPU）
3、除了硬件加速，浏览器还会使用类似于requestAnimation的方式进行性能优化
缺点：
1、运行过程控制较弱,无法附加事件绑定回调函数。CSS动画只能暂停,不能在动画中寻找一个特定的时间点，不能在半路反转动画，不能变换时间尺度，不能在特定的位置添加回调函数或是绑定回放事件,无进度报告
2、代码简单但是一旦业务复杂容易导致代码过长
3、不同的动画难以实现同步

JS动画：

优点：
1、JavaScript动画控制能力很强, 可以在动画播放过程中对动画进行控制：开始、暂停、回放、终止、取消都是可以做到的。
2、动画效果比css3动画丰富,有些动画效果，比如曲线运动,冲击闪烁,视差滚动效果，只有JavaScript动画才能完成
3、CSS3有兼容性问题，而JS大多时候没有兼容性问题
4、可以使用requestAnimation进行性能优化
缺点：
1、JavaScript在浏览器的主线程中运行，而主线程中还有其它需要运行的JavaScript脚本、样式计算、布局、绘制任务等,对其干扰导致线程可能出现阻塞，从而造成丢帧的情况。
2、代码的复杂度高于CSS动画

transform（变形）

直接改变大小和位置，没有过渡和变形时间，只有变换后的状态。该属性只对block级属性有效

transform-origin

所有的transform的变换基准都是transform-origin，即变换的原点。

我们可以通过特定的参数来更改变换的原点，该方法可接受1~3个参数：
一个值的情况:
<length>, <percentage>, 或left, center, right, top, bottom关键字中的一个

两个值的情况：
其中一必须是<length>, <percentage>, 或left, center, right关键字中的一个
另一个必须是<length>, <percentage>, 或top, center, bottom关键字中的一个

三个值的情况：
前两个值和只有两个值时的用法相同
第三个值必须是<length>，它始终代表Z轴偏移量

了解了原点后，我们可以来看下transform有哪些方法了：

scale 缩放

该方法接收1~2个 数字 参数，分别对应X轴和Y轴，数值代表缩放倍数

1	transform: scale(sx[,sy]); /* one or two unitless <number>s, e.g. scale(2,4) */

也可以单独写成X方向、Y方向、Z方向缩放，以及3D缩放：

transform: scaleX(sx); /* a unitless <number>, e.g.  scaleX(2.7) */
transform: scaleY(sy); /* a unitless <number>, e.g.  scaleY(0.3) */
transform: scaleZ(sy); /* a unitless <number>, e.g.  scaleZ(0.3) */
transform: scale3d(x,y,z); /* three unitless <number>, e.g.  scaleZ(0.3, 0.2, 0.6) */

rotate 旋转

该方法接收一个 角度 参数，由原点开始按照顺时针方向(若为负值则为逆时针)，将元素按指定的角度旋转。
其写法与scale相同，也包含单独X方向、Y方向、Z方向缩放，以及3D缩放。

translate 平移

该方法接收1~2个参数，可以是 长度或者百分比 ，分别对应X轴和Y轴，数值代表缩放倍数。写法与上述方法相同，同理也可以单独写成X方向、Y方向、Z方向、3D方向平移。

skew 斜切

该方法接收1~2个角度参数，分别对应X轴和Y轴，数值代表缩放倍数。写法与上述方法相同，但是无Z方向变换，无3D变换

transition（过渡）

简单来说，transition就是指某个元素的某个属性（如height、width等）从a状态转变到b状态的过程。

与transform相比，transition会有过渡时间和形变时间。

该方法接受四个参数：

1	transition: property duration timing-function delay;

transition-property

规定设置过渡效果的CSS属性的名称，类似于监听事件。默认值：默认为监听所有属性变化

设置监听以后可以通过改变监听的属性来触发transition，如通过:hover,:focus,checked等来改变

transition-duration

规定完成过渡效果需要多少秒或毫秒。默认值：0

PS：请始终设置transition-duration属性，否则时长为0，不会产生过渡效果。

transition-timing-function

规定速度效果的速度曲线。默认值：ease
具体有以下几种值可指定：
linear：动画从头到尾速度相同
ease：动画以低俗开始，然后加快，在结束前变慢
ease-in：动画以低速开始
ease-out：动画以低速结束
ease-in-out：动画以低速开始和结束
cubic-bezier(n,n,n,n)：根据三次贝塞尔函数，生成速度曲线

transition-delay

定义过渡效果延迟多久开始。默认值：0

animation（动画）

animation可以看作是transition的增强版，可以理解成多个transition或transform的叠加，并且可操作性更强。相比于transition，animation多了四种属性animation-iteration-count,animation-direction,animation-play-state,aniamtion-fill-mode。

animation-name

指定监听的keyframes：(在keyframes里设置每个关键帧对应的状态)

animation-duration

规定完成动画效果需要多少秒或毫秒。默认值：0

animation-delay

指定动画效果延迟多久开始。默认值：0

animation-timing-function

规定速度效果的速度曲线。默认值：ease
具体有以下几种值可指定：
linear：动画从头到尾速度相同
ease：动画以低速开始，然后加快，在结束前变慢
ease-in：动画以低速开始
ease-out：动画以低速结束
ease-in-out：动画以低速开始和结束
cubic-bezier(n,n,n,n)：根据三次贝塞尔函数，生成速度曲线

step(n[, start|end])：
n表示每两个关键帧之间变化多少次，例如：

@-webkit-keyframes test {
    0% {background: red}
    50% {background: yellow}
    100% {background: blue}
}

若 n=5 则表示0-50%之间变换了5次，50-100%之间也变换了5次。

start|end暂时没看懂。。。

animation-iteration-count

该参数指定了动画的播放次数，有两种参数可选。

number: (大于0的整数，默认为1)
infinite: 无线次数

animation-direction

该参数指定了动画的播放方向，有两个参数可选。

normal: 正常播放(默认)
alternate: 轮流反向播放

animation-play-state

该参数指定了动画的播放状态，有两个参数可选，即播放or暂停。

running: 播放(默认)
paused: 暂停

aniamtion-fill-mode

参考资料：[https://www.cnblogs.com/lyzg/p/5738860.html]

animation-fill-mode是css3动画的一个属性，它能够控制元素在动画执行前与动画完成后的样式。一个带有延迟，并且按正常方向执行的动画（正常方向是指从0%运行到100%），执行一次的过程可以描述如下：
animation动画
按照动画的执行时间来划分，一次动画过程可以将元素划分为3个状态：动画等待，动画进行和动画结束状态。默认情况下，只有在动画进行状态，才会应用动画的keyframes所定义的样式；而在动画等待和动画结束状态，不会对元素的样式产生影响。animation-fill-mode有四个值，分别是：

none：默认值，正是这个值,不会对动画等待和动画完成的元素样式产生改变；

backwards：动画等待的那段时间内，元素的样式将设置为动画第一帧的样式；

forwards：在动画结束后，元素的样式将设置为动画的最后一帧的样式；

both：相当于同时配置了backwards和forwards，意味着在动画等待和动画结束状态，元素将分别应用动画第一帧和最后一帧的样式。