动画相关之过渡和变换

过渡

过渡(Transition)，指属性值从原值到最终值的过渡状态。这是个复合属性，包括transition-property、transition-duration、transiton-timing-function和transition-delay四个属性值。

1. 过渡属性

过渡属性(transition-property)，指要进行过渡的属性。

// 对高度进行过渡
transition-property: height;
// 对所有属性进行过渡
transition-property: all;

2. 过渡时间

过渡时间(transition-duration)，指过渡从开始到完成的时间。

// 需要带上单位:S
transition-duration: 2s;

3. 过渡函数

过渡函数(transition-timing-function)，指过渡如何进行。

// ease: 平滑过渡
transition-timing-function: ease;

4. 过渡延迟

过渡延迟(transition-delay)，指过渡先等待一定时间在运行。

// 即使0秒，也要带上单位:S
transition-delay: 0s;

变换

变换(Transform)，指对某个元素进行平移、旋转、放大或倾斜等操作；通过变换原点(transition-origin)可指定变换的原点。

1. 平移

平移(translate)，指元素相对于原来的位置，向其他方向移动一定距离。

// 在X轴上平移
transform: translateX(20px);
// 在Y轴上平移
transform: translateY(20px);
// translate是前面两个的合并属性，下面表示向右移动10px，向下一定20px
transform: translate(10px,20px);

2. 旋转

旋转(rotate)，指元素围绕元素中心点进行旋转。

// deg表示角度，以X轴正半轴，向Y轴正半轴方向旋转
transform: rotate(30deg);

3. 放大

放大(scale)，指对某个元素进行放大或缩小操作。

// 表示放大1.2倍
transform: scale(1.2);

4. 倾斜

倾斜(screw)，指对元素进行倾斜操作，关于倾斜可参考这里。

// Y轴水平倾斜的角度
transform: screwX(30deg);
// X轴垂直倾斜的角度
transform: screwY(30deg);
// screw是前面两个属性的合并属性
transform: screw(30deg,30deg);