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>