CSS 动画
1.动画原理
1.视觉暂留作用
2.画面逐渐变化
2.动画的作用
1.用户的愉悦感
2.引起注意
3.反馈
4.演示
5.掩饰
3.CSS中的动画类型
1.transition补间动画2.keyframe关键帧动画3.逐帧动画
4.补间动画
位置 - 平移(left / right / margin / transform)方位 - 旋转(transform)大小 - 缩放(transform)透明度(opacity)其它 - 线性变换(transform)
实例：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| // HTML
<body>
<div class="container">
</div>
</body>
// CSS
<style>
.container{
width:100px;
height:100px;
background:red;
过渡动画
//transition-delay:1s; 延迟1s
//transition-timing-function:ease-in-out //定义动画进度和时间的关系(详情：matthewlein.com)
}
.container:hover{
width:800px;
//配合background 3s使用
}
</style>
|
5.keyframes动画：
A -> B -> C
相当于多个补间动画，与元素状态的变化无关，定义更灵活。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
| // HTML
<body>
<div class="container">
</div>
</body>
// CSS
<style>
.container{
width:100px;
height:100px;
background:red;
animation:ren 1s;
}
@keyframes run{
0%{
width:100px;
}
100%{
width:800px;
}
}
</style>
|
6.逐帧动画（属于补间动画里的一种）：
A B C适用于无法补间计算的动画，资源较大（需要很多图片），使用steps()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
| // HTML
<body>
<div class="container">
</div>
</body>
// CSS
<style>
.container{
width:100px;
height:100px;
border:1px solid red;
background:url(./animal.png) no-repeat;
steps()指定关键帧之间有多少个过渡画面
}
@keyframes run{
0%{
background-positon: 0 0;
}
12.5%{
background-positon: -100px 0;
}
25%{
background-positon: -200px 0;
}
37.5%{
background-positon: -300px 0;
}
50%{
background-positon: 0 -100px;
}
62.5%{
background-positon: -100px -100px;
}
75%{
background-positon: -200px -100px;
}
87.5%{
background-positon: -300px -100px;
}
100%{
background-positon: 0 0;
}
}
</style>
|
7.面试真题：
1.CSS动画的实现方式有几种：transition keyframes(animation)
2.过渡动画和关键帧动画的区别：
过渡动画需要有状态变化
关键帧动画不需要状态变化
关键帧动画能控制更精细
3.如何实现逐帧动画：使用关键帧动画去掉补间(steps)
4.CSS动画的性能：
1.性能不坏
2.部分情况下优于JS
3.但JS可以做到更好
4.部分高危属性：box-shadow等