B. Animaciones 2

Salida


1	<!DOCTYPE html>
2	<html lang="es">
3
4	<head>
5
6	<meta charset="UTF-8">
7	<meta name="viewport"
8	content="width=device-width">
9	<title>Animaciones 2</title>
10
11	<style>
12	menu {
13	display: flex;
14	align-items: center;
15	flex-wrap: wrap;
16	align-content: center;
17	justify-content: center;
18	list-style-type: none;
19	gap: 0.5rem;
20	padding: 0;
21	margin: 0;
22	}
23
24	#sonrisa {
25	font-size: 5rem;
26	width: fit-content;
27	margin: 1rem;
28	}
29
30	#sonrisa.gira {
31	animation-name: gira;
32	animation-duration: 5s;
33	/* La animación no lleva cambios
34	* automáticos de velocidad. */
35	animation-timing-function: linear;
36	/* La animación se repite
37	* indefinidamente. */
38	animation-iteration-count:
39	infinite;
40	}
41
42	@keyframes gira {
43	0% {
44	transform:
45	translate(0, 0) scale(1, 1) rotate(0);
46	}
47
48	25% {
49	transform:
50	translate(25vw, -25vh) scale(1, 2) rotate(0.25turn);
51	}
52
53	50% {
54	transform:
55	translate(50vw, 0) scale(2, 2) rotate(0.5turn);
56	}
57
58	75% {
59	transform:
60	translate(25vw, 25vh) scale(2, 1) rotate(0.75turn);
61	}
62
63	100% {
64	transform:
65	translate(0, 0) scale(1, 1) rotate(1turn);
66	}
67
68	}
69	</style>
70
71	</head>
72
73	<body>
74
75	<menu>
76	<li>
77	<h1>Animaciones 2</h1>
78	</li>
79	<li>
80	<button type="button"
81	onclick="sonrisa.classList
82	.add('gira')">
83	Gira sin cesar
84	</button>
85	</li>
86	<li>
87	<button type="button"
88	onclick="sonrisa.classList
89	.remove('gira')">
90	Detén
91	</button>
92	</li>
93	</menu>
94
95	<figure id="sonrisa">😁</figure>
96
97	</body>
98
99	</html>