Maquetación Web Dinámica / Animaciones CSS: de sencillas a profesionales

Reto: una escena en loop, 100% CSS

Reto70 min100 XP

Hasta ahora animaste ELEMENTOS. Hoy diriges una ESCENA: varios actores, un solo ciclo, en loop infinito y perfecto — el tipo de pieza que la gente se queda mirando sin saber por qué. Es el reto más ambicioso del curso hasta ahora, y el examen real es de dirección de orquesta: que todo pase en el momento justo, para siempre, sin un solo salto.

Reto

Día y noche: la escena infinita

Difícil60 min100 XP(×2 sin mirar la solución)

Qué debes construir

Un ciclo de día y noche completo (o tu propia escena en loop: un cohete despegando y aterrizando, un faro de noche — el tema es libre; los requisitos, no):

<div class="escena" role="img" aria-label="Paisaje animado: el sol recorre el cielo, anochece, salen las estrellas y la luna, y vuelve a amanecer">
<div class="rueda">
  <div class="sol"></div>
  <div class="luna"></div>
</div>
<div class="noche">
  <div class="estrellas"></div>
</div>
<div class="montana m1"></div>
<div class="montana m2"></div>
</div>
<p class="nota">Un ciclo completo dura 12 segundos. Míralo dos veces: no hay ningún punto donde "reinicie".</p>

body { font-family: system-ui; padding: 20px; background: #f8fafc; }
.escena { position: relative; width: 340px; height: 230px; overflow: hidden; border-radius: 14px; background: linear-gradient(#38bdf8, #bae6fd 75%); }
.rueda { position: absolute; left: 50%; bottom: -160px; width: 320px; height: 320px; margin-left: -160px; animation: ciclo 12s linear infinite; }
@keyframes ciclo { to { transform: rotate(360deg); } }
.sol { position: absolute; top: 6px; left: 50%; width: 40px; height: 40px; margin-left: -20px; border-radius: 50%; background: #fbbf24; box-shadow: 0 0 28px rgba(251, 191, 36, 0.85); }
.luna { position: absolute; bottom: 6px; left: 50%; width: 30px; height: 30px; margin-left: -15px; border-radius: 50%; background: #e2e8f0; box-shadow: 0 0 16px rgba(226, 232, 240, 0.6); }
.noche { position: absolute; inset: 0; background: linear-gradient(#0b1120, #1e1b4b); opacity: 0; animation: anochecer 12s linear infinite; }
@keyframes anochecer {
0%, 20% { opacity: 0; }
32%, 68% { opacity: 1; }
80%, 100% { opacity: 0; }
}
.estrellas { position: absolute; top: 26px; left: 30px; width: 3px; height: 3px; border-radius: 50%; background: white; box-shadow: 60px 14px white, 130px 34px white, 200px 8px white, 250px 44px white, 90px 64px white, 170px 74px white, 20px 94px white, 230px 96px white; }
.montana { position: absolute; bottom: 0; width: 0; height: 0; border-style: solid; }
.m1 { left: 14px; border-width: 0 55px 85px 55px; border-color: transparent transparent #134e4a transparent; }
.m2 { left: 150px; border-width: 0 80px 110px 80px; border-color: transparent transparent #115e59 transparent; }
@media (prefers-reduced-motion: reduce) { .rueda, .noche { animation: none; } }
.nota { font-size: 13px; color: #64748b; margin-top: 14px; max-width: 44ch; }

Requisitos:

Mínimo 4 actores en escena; al menos 3 animados (en la referencia: la rueda sol-luna, el cielo nocturno y — dentro de él — las estrellas; las montañas son escenografía fija).
Un solo reloj maestro: TODAS las animaciones comparten la misma duración, y los eventos se sincronizan con porcentajes de keyframes (el anochecer empieza cuando el sol se oculta, no "más o menos ahí").
Loop perfecto: cada animación termina exactamente donde empezó. Prueba de fuego: mirar dos ciclos completos sin detectar el reinicio.
Regla de oro estricta: solo se animan transform y opacity. El cambio de cielo día→noche NO anima el background (esa es la trampa central del reto — hay una manera barata).
La escena es una imagen para la accesibilidad (role="img" + aria-label que la describa) y con reduced-motion queda un cuadro estático digno (el día, por ejemplo).

Reglas

CSS puro: cero JavaScript, cero imágenes, cero SVG (las formas, con las técnicas de arte del módulo 9: bordes, círculos, sombras múltiples).
La rotación del ciclo con curva linear (los planetas no frenan).
Presupuesto libre para el tema, no para el rendimiento: si activas Paint flashing y tu escena parpadea verde en cada fotograma, hay una propiedad cara escondida.

60:00

Cuando estés listo, arranca el reloj.

El razonamiento — la escena entera se sostiene en tres decisiones de dirección:

El reloj maestro (12s para todos). La tentación es darle a cada actor su propia duración "a ojo" — y ahí los ciclos se van desfasando: al tercer loop, las estrellas brillan a mediodía. Con UNA duración compartida y eventos en porcentajes, la sincronía es matemática y el loop es estable para siempre. Es la versión CSS de una orquesta con un solo director.
La rueda sol-luna. Mover el sol con translate exigiría calcular su arco punto a punto; montarlo en una rueda que gira convierte el problema en geometría gratis — y regala la coordinación perfecta: sol y luna JAMÁS pueden desincronizarse porque son la misma animación. Cuando un movimiento parece difícil, busca el sistema de referencia donde es trivial.
La noche es un objeto, no un color. Animar el background del cielo costaría un repintado por fotograma (y gradientes ni siquiera interpolan bien). El overlay con opacity es trabajo de compositor puro — y de paso resuelve las estrellas por herencia. La regla de oro no fue una restricción: fue la que dictó la mejor arquitectura.

dia-y-noche.css

Los porcentajes del anochecer salen de la geometría de la rueda: el sol (que parte arriba, 0%) toca el horizonte alrededor del 25% del giro — así que la noche entra fundiéndose del 20% al 32%, y sale del 68% al 80%, simétrica. Si tu escena usa otra geometría, tu guion tendrá otros números: lo innegociable es que salgan del guion, no del tanteo.

Autoevaluación: ¿puedes ver dos ciclos completos sin detectar el reinicio? ¿Paint flashing queda en silencio durante el loop? ¿La escena con reduced-motion es un cuadro que podrías enmarcar (y no un fotograma a medio anochecer)? ¿El aria-label describe la ESCENA y no los divs? Cuatro síes: dirigiste tu primera orquesta.

Qué sigue

Dirigiste una escena decorativa; el reto final del módulo aplica la misma dirección de orquesta a lo que harás cada semana de tu vida profesional: la entrada de un hero — título, subtítulo y llamado a la acción presentándose en cascada. Menos espectáculo, más oficio.