CSS3转换、过渡与动画

一、转换transform

transform字面上就是变形，转换的意思，在CSS3中转换主要包括移动、旋转、缩放和扭曲。

（1）移动translate（）

translate（x，y）

translateX（X）

translateY（Y）

（2）旋转rotate（）

正数表示顺时针旋转，负数则表示逆时针旋转

（3）缩放scale（）

scale（x，y）

scaleX（X）

scaleY（Y）

（4）扭曲skew（）

skew（x，y）

skewX（X）

skewY（Y）

（5）矩阵matrix（）

将上述所有的2D转换方法组合在一起，需要6个参数，包含数学函数、允许旋转、缩放、移动、镜像以及倾斜元素，相当于直接应用一个变换矩阵。

transform：matrix（0.866，0.5，-0.5，0.866，0，0）

二、过渡transition

transition：property duration timing-function delay（分别代表设置过渡效果的css属性名称、 过渡效果时间、速度曲线和开启时间）

三、动画animation

动画animation类似于transition，它们都是随着时间改变元素的属性值。它们的主要区别就是transition需要触发一个事件（hover或者click等）才会随着时间改变其css属性，但是animation则不需要触发任何事件即可显式地随着时间改变其css属性，从而实现一种动画效果

animation：name duration timing-function delay iteration-count direction（分别代表 需要绑定到选择器的keyframe名称、动画完成所需时间、速度曲线和动画开启前的延迟、播放次数以及是否轮流反向播放动画）