transform，transition，animation，keyframes区别

这里不讲最基础的东西好比这些的含义，站内不少人都有讲，这里对比一下讲一讲区别，加深一下理解。

看不明白的地方欢迎评论，我更改一些措辞，或者加一些示例。

其实要区别一些属性的最好方法就是看翻译，翻译成中文不少就顾名思义了！

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-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。

keyframes关键帧

熟悉动画制做的同窗估计都知道关键帧，他也能够看做时间帧，这个时间在表述的时候以百分比的形式展现出来。

@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的触发就是咱们所设置的，根据她所规定的值指定咱们想要的规则，能够在一开始就执行，能够执行一次不再变。