简述 transform，transition，animation 的作用？

1 transform

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

1. rotate：围绕中心点旋转 deg 单位

2. translate（x,y）:向 x y 轴移动位置 px

3. scale：整体缩放 倍数、scaleX scaleY 沿 轴方向缩放

4. skew(x,y) 切变、scaleX scaleY 沿轴切变 ​

注意transform的层叠性，后面写的会覆盖前面

transform属性是静态属性，一旦写到style里面，将会直接显示作用，无任何变化过程，想要元素有动画效果，需要transition提供过度效果。

2 transition 

transition 属性设置元素当过渡效果。常配合hover使用，增强网页交互体验。 

transition-property            指定要过渡的css属性（默认值为all）

transition-duration            指定完成过渡花费的时间（单位：s/ms）

transition-timing-function  指定速度效果的速度曲线（是匀速还是非匀速）

transition-delay                指定过渡效果何时开始（延迟多久后开始执行） ​

属性可以分开写,也可以放在一起写,放在一起写：

transiton:过渡属性 过渡所需要时间 过渡动画函数 过渡延迟时间； ​

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

transition对于display 肯定是无效的；

transition对于visibility 也是无效的；

transition对background颜色是无效，颜色过渡是用background-image: linear-gradient(颜色1，颜色2);

transition对于opacity透明度是有效。

局限性：

transition需要事件触发，所以没法在网页加载时自动发生。

transition是一次性的，不能重复发生，除非一再触发。

transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态。

一条transition规则，只能定义一个属性的变化，不能涉及多个属性。

3 animation

缩写语法：animation:时长|过渡方式| 延迟|次数|方向|填充模式|是否暂停|动画名;

时长: 1s或者1000ms

过渡方式:跟transition取值一样，如linear

次数: 3或者2.4或者infinite

方向: reverse | alternate、alternate-reverse

填充模式: none | forwards | backwards | both

是否暂停: paused | running

以上所有属性都有对应的单独属性

总结：2个状态之间用过渡transistion，多个状态之间用动画animation 

 

以上内容转载为稀土掘金黑马zhujunjin

感兴趣的可以去搜索更多资料 谢谢大家