Ejercicio: Transiciones y animaciones

Objetivo

Dar vida a una interfaz con una transición en un botón, una tarjeta que se levanta, tres animaciones con @keyframes y respeto por el movimiento reducido.

La página de partida

Este es el HTML de tu página. No lo modifiques: escribe solo el CSS.

<button class="boton">Pásame el cursor</button>
<div class="tarjeta"><h3>Tarjeta</h3><p>Se levanta al pasar el cursor.</p></div>
<div class="aviso">Hola, aparezco con un fundido</div>
<div class="cargando"><span class="punto"></span></div>
<div class="latido">♥</div>

Pasos

Marca cada paso a medida que lo completes. Tu avance se guarda en este navegador.

• Escribe *, *::before, *::after { box-sizing: border-box; } y body { margin: 0; padding: 24px; font-family: system-ui, sans-serif; }.
• Da a .boton fondo #4f46e5, texto blanco, sin borde, padding: 10px 20px, border-radius: 10px y una transition de background-color y transform de 0.2s.
• En .boton:hover, cambia el fondo a #3730a3 y súbelo con transform: translateY(-3px).
• Haz que .tarjeta se levante al pasar el cursor: transición de transform y box-shadow (.25s), y en :hover translateY(-6px) con una sombra mayor.
• Crea @keyframes aparecer (de opacity: 0 y translateY(12px) a opacity: 1 y transform: none) y aplícala al .aviso durante 0.5s con ease-out y both.
• Crea @keyframes latido (escala de 1 a 1.25 a mitad del ciclo) y aplícala a .latido durante 1.2s, infinite, con ease-in-out.
• Crea @keyframes girar y haz que .punto (de .cargando) sea un círculo de 32px con borde que gira de forma continua en 0.8s con linear.
• Añade @media (prefers-reduced-motion: reduce) que ponga animation: none y transition: none a todo.

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; padding: 24px; font-family: system-ui, sans-serif; }

.boton {
  background: #4f46e5;
  color: #fff;
  border: 0;
  padding: 10px 20px;
  border-radius: 10px;
  transition: background-color 0.2s, transform 0.2s;
}
.boton:hover { background: #3730a3; transform: translateY(-3px); }

.tarjeta {
  width: 240px;
  margin: 16px 0;
  padding: 16px;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgb(0 0 0 / .08);
  transition: transform .25s, box-shadow .25s;
}
.tarjeta:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 30px rgb(0 0 0 / .18);
}

@keyframes aparecer {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
.aviso { animation: aparecer 0.5s ease-out both; }

@keyframes latido {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.25); }
}
.latido { animation: latido 1.2s ease-in-out infinite; }

@keyframes girar { to { transform: rotate(360deg); } }
.punto {
  display: block;
  width: 32px;
  height: 32px;
  border: 4px solid #c7d2fe;
  border-top-color: #4f46e5;
  border-radius: 50%;
  animation: girar 0.8s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}