zxhfighter
12/20/2013 - 8:10 AM
transform、transition、animation
transform、transition、animation
CSS变形、渐变和动画
CSS新增了transform（变形）、transition（渐变，也称作过渡）和animation（动画）。
基础
为了更好的理解下文所属，需要事先理解CSS的坐标系空间，这里以3D坐标系为例：
transform
如果你使用过PS中的变形工具（快捷键为ctrl + t），那边变形就很好理解，无非就是那几种变形：
- 平移（translate）：分为X、Y、Z轴平移（如果有Z轴）。
- 缩放（scale）：分为X轴缩放、Y轴缩放。
- 旋转（rotate）：分为X、Y、Z轴旋转（如果有Z轴）。
- 斜切（skew）：分为X、Y轴斜切。
变形一般为线性改变，也可以结合下面的渐变，给变形添加平滑的过渡效果，两者结合起来能实现很多酷炫的效果。
transition
渐变，一般控制变形或者动画的运行，是先快后慢还是先慢后快，也就是著名的ease缓动效果，常见的有以下几种：
- ease-in：先慢后快
- ease-out：先快后慢
- ease-in-out：先慢再快再慢
- cubic-bezier：给定两个控制点自定义快慢
animation
动画，即通过定义@keyframes来实现动画，动画的过程中同理可以使用上文介绍的各种缓动效果。