H5渐变&过渡&动画

1.transform2D属性

1.1 scale缩放

js1
2
3
4
5
transform：scale(x, y)
transform：scaleX() 在x轴缩放，大于1的数为变长，小于1大于0的小数为变短
transform：scaleY() 在y轴缩放，大于1的数为变高，小于1大于0的小数为变矮

注意：scale缩放后，原长宽不会发生变化

1.2 tanslate平移

js1
2
3
transform:translate(x, y)
transform:translateX(像素值或百分比) 在x轴进行平移，为正往右移，为负往左移
transform:translateY(像素值或百分比) 在y轴进行平移，为正往下移，为负往上移

1.3 rotate旋转

js1
2
3
4
5
6
7
8
9
// 烤羊肉串
transform:rotateX(角度值deg) 在x轴进行旋转，为正顺时针进行旋转，为负时逆时针进行旋转

// 舞蹈
transform:rotateY(角度值deg) 在y轴进行旋转，为正顺时针进行旋转，为负时逆时针进行旋转

// 大转盘
transform:rotateZ(角度值deg) 在z轴进行旋转，为正顺时针进行旋转，为负时逆时针进行旋转
transform:rotate(角度值deg) 相当于rotateZ(角度值deg)

1.4 skew斜切

js1
2
3
4
5
6
// 关公耍大刀
transform:skew(x角度,y角度) 会在斜切的过程中离你先近后远

transform:skewX(角度值deg) 在x轴进行斜切

transform:skewY(角度值deg) 在y轴进行斜切

1.5 transform-origin

js1
2
3
4
5
6
transform-origin 设置tranform转换的原点

语法：
transform-origin: 50% 50% 原点默认在中点，相当于center center;
原点设置为左上角：top left;
原点设置为右上角：top right; 

1.6 transform-style

js1
2
3
4
5
transform-style设置元素在tranform转换中是否停留在三维空间

transform-style: flat，默认停留在当前平面，即被扁平化在二维空间中

transform-style: preserve-3d，看起来像停留在三维空间中

2.动画

2.1 动画的概念

js1
2
3
动画相当于一组连续的图片进行播放。结合场景理解：小人书，自拍10连拍。

在CSS中实现动画就是去实现动画的“关键帧”。

2.2 CSS动画语法

js1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
定义动画：

// 方式一
@keyframes 动画名 {
    from: 动画开始状态 相当于0%
    to: 动画结束状态 相当于100%
}

// 方式二
@keyframes 动画名 {
    0%: 动画开始状态
    20%：
    50%：
    ……
    100%: 动画结束状态
}
form 和 to 可以和百分比混用

执行动画：
#box {
    animation: 动画名 动画执行时间;
}

2.3 animation属性【重点】

js1
2
3
4
5
6
7
8
【掌握】animation: 动画名 动画执行时间 动画执行运动函数 动画延迟时间 动画循环次数 动画执行方向

animation-fill-mode 设置动画执行完后保持的状态
none: 默认值，不保留任何状态

【掌握】forwards: 保留动画结束时的状态
【掌握】backwards: 保留动画开始时的状态
both: 保留动画开始或结束的状态，实际效果保留结束时状态