CSS3之animation动画

# CSS3 之 animation 动画

可用F12开发者工具查看元素及样式，可打开 codepen 在线编辑代码。

<html>
	<div class="animationBox">
		<div class="rotate">旋转动画1</div>
		<div class="play">
			<div class="img">旋转动画2</div>
			<span><p class="p2"></p></span>
			<span><p></p></span>
			<span><p></p></span>
			<span><p class="p2"></p></span>
		</div>
		<div class="elasticity">弹性动画</div>
		<div class="elasticity2">曲线弹性</div>
	</div>
</html>

<style>
	.animationBox {
		overflow: hidden;
	}
	.animationBox > div {
		width: 100px;
		height: 100px;
		background: #eee;
		border-radius: 50%;
		text-align: center;
		line-height: 100px;
		margin: 30px;
		float: left;
	}
	.rotate {
		animation: rotate 5s linear infinite;
	}
	.rotate:hover {
		animation-play-state: paused;
	}
	@keyframes rotate {
		0% {
			transform: rotate(0);
		}
		100% {
			transform: rotate(360deg);
		}
	}
	.animationBox > .play {
		position: relative;
		margin: 50px 30px;
		background: none;
	}
	.play .img {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
		width: 100px;
		height: 100px;
		background: #eee;
		border-radius: 50%;

		animation: rotate 5s linear infinite;
	}
	.play span {
		position: absolute;
		top: 1px;
		left: 1px;
		z-index: 0;
		display: block;
		width: 96px;
		height: 96px;
		border: 1px solid #999;
		border-radius: 50%;
	}
	.play span p {
		display: block;
		width: 4px;
		height: 4px;
		background: #000;
		margin: -2px 0 0 50%;
		border-radius: 50%;
		opacity: 0.5;
	}
	.play span .p2 {
		margin: 50% 0 0 -2px;
	}
	.play span {
		animation: wave 5s linear infinite;
	}
	.play > span:nth-child(3) {
		/* 延迟时间 */
		animation-delay: 1s;
	}
	.play > span:nth-child(4) {
		animation-delay: 2.2s;
	}
	.play > span:nth-child(5) {
		animation-delay: 3.8s;
	}

	@keyframes wave {
		0% {
			transform: scale(1) rotate(360deg);
			opacity: 0.8;
		}
		100% {
			transform: scale(1.8) rotate(0deg);
			opacity: 0;
		}
	}

	.elasticity {
		/* 参数说明
      动画名称 花费时间 贝塞尔曲线 延迟开始时间 播放次数n|infinite  是否反向播放动画
    */
		animation: elasticity 1s linear 2s infinite;
	}

	@keyframes elasticity {
		0% {
			transform: scale(0);
		}
		60% {
			transform: scale(1.1);
		}
		90% {
			transform: scale(1);
		}
	}

	.elasticity2 {
		/**
    贝塞尔曲线 cubic-bezier(x1,y1,x2,y2)

    通过调整贝塞尔曲线可以设置出多种动画效果，比如反弹效果等
    X轴的范围是0~1，Y轴的取值没有规定，但是也不宜过大
    直线：linear，即cubic-bezier(0,0,1,1)

    贝塞尔曲线在线工具：https://cubic-bezier.com/#.17,.67,.83,.67
      */
		animation: elasticity2 1s cubic-bezier(0.39, 0.62, 0.74, 1.39) 2s infinite;
	}
	@keyframes elasticity2 {
		0% {
			transform: scale(0);
		}
		90% {
			transform: scale(1);
		}
	}
</style>

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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148

# 贝塞尔曲线 cubic-bezier(x1,y1,x2,y2)

通过调整贝塞尔曲线可以设置出多种动画效果，比如反弹效果等 X 轴的范围是 0~1，Y 轴的取值没有规定，但是也不宜过大。如：直线 linear，即 cubic-bezier(0,0,1,1)

贝塞尔曲线在线工具：https://cubic-bezier.com/#.17,.67,.83,.67

参考：https://www.w3school.com.cn/css3/index.asp

编辑

上次更新: 2020/12/28, 20:12:00

← CSS3之transition过渡「布局技巧」图片未加载前自动撑开元素高度→