什么是CSS动画？
能够使元素逐渐从一种样式变为另一种样式。可以随意更改任意数量的 CSS 属性。
animation
语法
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
1、animation-name
用来为 @keyframes 动画指定名称。
animation-name: donghua
2、animation-duration
用来定义动画播放完成花费的时间需要多少秒或者毫秒。
animation-duration: time
3、animation-timing-function
用来指定动画的完成过程是以何种速度曲线来实现的。通俗的讲就是匀速、加速或者匀速在加速。
与其他属性不同，我们除了可以使用CSS预置的属性值之外，还可以通过 三次贝尔曲线 来自定义值。
animation-timing-function: value @value liener // 匀速进行 ease // 慢速开始，加速，减速结束 ease-in // 慢速开始 ease-out // 慢速结束 ease-in-out // 慢速开始和结束 cubic-bezier(n,n,n,n) // 自定义值 n的取值范围 0 -
除了上面属性之外还有个非常实用的函数steps(number，[end | start])
用于实现逐帧动画，其中第一个参数number用于设置分几步完成，必须为整数。第二个参数 可选start/end默认end。TA决定从一帧到另一帧的中间间隔是用开始帧还是结束帧来进行填充。选start就是表示第一帧立即执行，从第二帧开始然后第一帧结束。end则表示正常开始结束。
steps(N, start)将动画分为N段，动画在每一段的起点发生阶跃(即图中的空心圆 → 实心圆),动画结束时停留在了第 N 帧
steps(N, end)将动画分为N段，动画在每一段的终点发生阶跃(即图中的空心圆 → 实心圆),动画结束时第 N 帧已经被跳过(即图中的空心圆 → 实心圆)，停留在了 N+1 帧。
4、animation-delay
用来定义动画什么时候开始，可以为负数，负数的时候表示跳过而进入动画,单位是秒或者毫秒。
animation-delay: time
5、animation-iteration-count
用来定义动画播放的次数，可以设置整数或者infinite（无限次）
animation-iteration-count: value
6、animation-direction
定义动画的播放循序。
animation-direction: value @value normal // 正常 reverse // 反向播放 alternate // 奇数正向播放，偶数反向播放 alternate-reverse // 奇数反向播放，偶数正向播放
7、animation-fill-mode
用来设置动画结束后所要应用的动作or属性值
animation-fill-mode: value @value none // 无 forwards // 动画结束后保持最后一个属性值 backwards // 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值 both // 向前和向后填充模式都被应用
8、animation-play-state
指定动画是运行还是暂停
animation-play-state: paused|running;
@keyframes
用来创建一个动画的具体实现过程
@keyframes donghua { from { width: 100px; } to { width: 200px; } }
Transition
谈及CSS动画属性，我们不得不说下transition这个属性，因为TA基本是和animation配对出现。
Transition CSS的过渡属性。
语法
transition: property duration timing-function delay;
1、transition-property
设置应用过渡效果的CSS属性名称。默认值是all，可以单独指定。
transition-property: none | all | 具体CSS属性值名;
2、transition-duration
用来设置完成过渡效果需要花费的时间（秒/毫秒）
transition-duration: value
3、transition-timing-function
用来设置动画过渡效果的速度曲线。
transition-timing-function: value @value linear // 匀速-结束 ease // 慢速-加速-减速-结束 ease-in // 慢速开始-结束 ease-out // 开始-慢速结束 ease-in-out // 慢速开始-慢速结束 cubic-bezier(n,n,n,n); // 自定义值，n 0-1之间
4、transition-delay
设置过渡效果何时开始。单位是（秒/毫秒）
transition-delay: time
Transform
用来设置元素的 2D => 3D 转换。实现元素的旋转、缩放、移动或者改变形状。
1、transform: matrix(n,n,n,n,n,n)
用来定义2D转换
2、transform: matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)
用来定义3D转换
3、transform: translate
用来实现元素在x,y轴上平移效果。
4、transform: translate3d
用来实现元素在x,y,z轴上平移效果。
5、transform: scale
用来实现2D下的缩放。
6、transform: scale3d
用来实现3D下的缩放。
7、transform: rotate
用来实现2D下的旋转。
8、transform: rotate3d
用来实现3D下的旋转。
9、transform: skew
用来实现2d方向的倾斜
10、transform: perspective
将该元素的子元素设置透视效果，搭配perspective-origin使用。
本篇主要将动画涉及到的三个基本属性以及属性值回顾了一遍，下篇文章将重点对每个属性值的效果进行实际应用。
