transform,transition,animation,keyframe
一、transform
transform 并不是一个动态属性，他是一个静态的属性。专注于改变元素基于默认位置的以下值。
注意，只是改变，并不是一个过程，只是针对css的各种特殊改变，完全可以看作是与 width，height，position 等同类的属性。
| 值 | 描述 |
|---|---|
| none | 定义不进行转换。 |
| matrix(n,n,n,n,n,n) | 定义 2D 转换，使用六个值的矩阵。 |
| matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) | 定义 3D 转换，使用 16 个值的 4x4 矩阵。 |
| translate(x,y) | 定义 2D 转换。 |
| translate3d(x,y,z) | 定义 3D 转换。 |
| translateX(x) | 定义转换，只是用 X 轴的值。 |
| translateY(y) | 定义转换，只是用 Y 轴的值。 |
| translateZ(z) | 定义 3D 转换，只是用 Z 轴的值。 |
| scale(x,y) | 定义 2D 缩放转换。 |
| scale3d(x,y,z) | 定义 3D 缩放转换。 |
| scaleX(x) | 通过设置 X 轴的值来定义缩放转换。 |
| scaleY(y) | 通过设置 Y 轴的值来定义缩放转换。 |
| scaleZ(z) | 通过设置 Z 轴的值来定义 3D 缩放转换。 |
| rotate(angle) | 定义 2D 旋转，在参数中规定角度。 |
| rotate3d(x,y,z,angle) | 定义 3D 旋转。 |
| rotateX(angle) | 定义沿着 X 轴的 3D 旋转。 |
| rotateY(angle) | 定义沿着 Y 轴的 3D 旋转。 |
| rotateZ(angle) | 定义沿着 Z 轴的 3D 旋转。 |
| skew(x-angle,y-angle) | 定义沿着 X 和 Y 轴的 2D 倾斜转换。 |
| skewX(angle) | 定义沿着 X 轴的 2D 倾斜转换。 |
| skewY(angle) | 定义沿着 Y 轴的 2D 倾斜转换。 |
| perspective(n) | 为 3D 转换元素定义透视视图。 |
二、transition
transition 是指当它所绑定的属性（比如width）发生改变的时候，不再突变，而是根据速度曲线慢慢变化。
这种改变不仅仅是定义好的hover改变，也包括后期js导致的改变，甚至不小心替换class名导致的css属性改变，也就是说无论在何种情况下发生的属性改变，都会导致过渡。
这个时候就会知道transition并不是与transform绑定的属性，初学者在刚看的时候总会以为有transform必然有transition，不然不可用，然而其实transition是完全可以不需要transform而独立使用的。
transform可以看作只是一个基础属性，与width，height，position同类的属性，而transition只是规定了发生过渡的时候所需的自定义规则，两者独立使用也可。
| 值 | 描述 |
|---|---|
| transition-property | 规定设置过渡效果的 CSS 属性的名称。 |
| transition-duration | 规定完成过渡效果需要多少秒或毫秒。 |
| transition-timing-function | 规定速度效果的速度曲线。 |
| transition-delay | 定义过渡效果何时开始。 |
三、animation
animation 仍是首先，它是动画，从效果上能够“肤浅”地认为它是Transition跟Transform（或者普通CSS属性）的组合。但毕竟有所不一样：Animation能够经过keyframe显式控制当前帧的属性，何时干什么彻底能说了算，比Transition更灵活；Transition在过渡以后会改变元素的属性（固然不能彻底怪它，它只是让元素“这么着”地从原始属性变为目标属性），而Animation只是模拟元素的属性改变并在必定时间内按照必定速率（这些跟Transition相似）来PLAY动画，动画结束了元素本来长啥样就显示啥样，它拍拍屁股走人。当然它也提供了参数让你执行完动画后停留在结束状态。
| 值 | 描述 |
|---|---|
| animation-name | 规定需要绑定到选择器的 keyframe 名称。 |
| animation-duration | 规定完成动画所花费的时间，以秒或毫秒计。 |
| animation-timing-function | 规定动画的速度曲线。 |
| animation-delay | 规定在动画开始之前的延迟。 |
| animation-iteration-count | 规定动画应该播放的次数。 |
| animation-direction | 规定是否应该轮流反向播放动画。 |
它已然规定需要绑定keyframe，这就说明animation才是与keyframes不可分割的，不定义animation，keyframes写了毫无意义，keyframes不写，animation怎么也动不起来。
由此可知，keyframes是帮助animation的一个东西，那我们先看看keyframes再说animation。
四、keyframe
熟悉动画制作的同学估计都知道关键帧，他也可以看作时间帧，这个时间在表述的时候以百分比的形式展示出来。
@keyframes move {
0% {top:0px;}
25% {top:200px;}
50% {top:100px;}
75% {top:200px;}
100% {top:0px;}
}
在每个百分比里，其实就是写好的css样式，里面可以规定width等基础属性，当然也可以写transform！按照时间从小到大进行过渡
那最后keyframes就是已经写好的有过渡的动画动作，这才是动态的！
transform只是某刻的转变，加了时间，才叫动态，才叫动画！
那写好了动画，给谁用，就用到了animation，将animation配置好写到css里，就可以给特定元素辅以动画了！
每写出来的一个keyframes，只是代表一个动画行为，变长变短，转圈圈，仅此而已，没有别的含义了。
使用keyframes的就是animation了。
五、transition与animation的区别
所以其实要说区别，应该是要区分transition与animation的区别，说了这么多，顾名思义就可以看出来，一个是过渡，一个是动画！硬要说的话，过渡是只有两个帧的动画，动画是有很多次过渡的过渡。
transition是由属性的变化而触发的，无论这个变化是不是我们期望的，只要属性改变，就会触发transition。animation的触发就是我们所设置的，根据它所规定的值指定我们想要的规则，可以在一开始就执行，可以执行一次再也不变。