A. Animaciones 1

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 1</title>
10
11	<style>
12	p {
13	font-size: 5rem;
14	width: fit-content;
15	/* Usa una animación de nombre
16	* vaYViene. */
17	animation-name: vaYViene;
18	/* La animación dura 5s. */
19	animation-duration: 5s;
20	/* Al terminar la animación,
21	* mantiene los últimos valores
22	* de las propiedades que haya
23	* modificado. */
24	animation-fill-mode: forwards;
25	}
26
27	/* Animación de nombre vaYViene.
28	* Indica algunos porcentajes
29	* de avance, de 0$ a 100%. El
30	* resto de la animación es
31	* calculado. */
32	@keyframes vaYViene {
33	0% {
34	transform: translateX(0);
35	color: red;
36	}
37
38	50% {
39	transform: translateX(50vw);
40	color: blue;
41	}
42
43	100% {
44	transform: translateX(0);
45	color: green;
46	}
47
48	}
49	</style>
50
51	</head>
52
53	<body>
54
55	<h1>Animaciones 1</h1>
56
57	<p>Hola</p>
58
59	</body>
60
61	</html>


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>