Transiciones aplicadas

Aplicar transiciones en CSS a una card puede cambiar por completo la experiencia: con hover, transform y box-shadow bien configurados, logras microinteracciones limpias, rápidas y consistentes. Aquí verás cómo se definen los estilos base, cómo se anima la tarjeta y cómo el contenido responde con un pequeño delay para reforzar la jerarquía visual.

¿Cómo crear una card con transiciones CSS consistentes?

Para una base sólida se define un contenedor con ancho fijo, espaciado interno y bordes suaves. Lo clave: una transición uniforme para todas las propiedades que cambiarán, manteniendo la misma duración y timing function para que se sienta natural.

.card {
  width: 300px;
  padding: 30px;
  background: white;
  border: 2px solid #ecf0f1; /* gris claro */
  border-radius: 10px;
  cursor: pointer;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

• width: 300px para controlar la composición.
• padding: 30px para espacio interno legible.
• border: 2px y border-radius: 10px para un contorno suave.
• transition de .3s en transform, box-shadow y border-color para coherencia.

¿Qué conceptos aplicas al definir la base?

• Uso de cursor: pointer para indicar interactividad.
• Transición con ease para un movimiento suave.
• Separación de propiedades en la transition para claridad y control.

¿Qué efectos aplicar con hover para mejorar la interacción?

Al pasar el puntero, la tarjeta se eleva con translate, gana profundidad con box-shadow y refuerza el foco con el cambio de color del borde a azul. Todo a la misma velocidad para evitar desajustes visuales.

.card:hover {
  transform: translateY(-10px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .2);
  border-color: #3498db;
}

• transform: translateY(-10px) para elevar la tarjeta.
• box-shadow: 0 10px 30px rgba(0,0,0,.2) para profundidad.
• border-color azul para contraste y foco.

¿Por qué mantener la misma duración en transition?

• Asegura una percepción fluida del cambio.
• Evita saltos entre propiedades que distraen.
• Refuerza la consistencia del movimiento.

¿Cómo estilizar el contenido: títulos y párrafos con transición?

El contenido interno también comunica. El título cambia de color al hover y el párrafo se desplaza con un pequeño delay para entrar en escena después de la tarjeta.

.card h3 {
  color: #2c3e50; /* gris oscuro */
  margin-bottom: 10px;
  transition: color .3s ease;
}

.card h3:hover {
  color: #3498db;
}

.card p {
  color: #7f8c8d; /* gris */
  transition: transform .3s ease .1s; /* delay de 0.1s */
}

.card:hover p {
  transform: translateX(10px);
}

• H3 con color #2c3e50 y margen inferior de 10px para separación.
• transition: color .3s ease en el título para un cambio suave.
• Párrafo con transition en transform y delay de 0.1s para entrar después.
• translateX(10px) en el texto al hover de la card, no del párrafo: se activa desde el contenedor.

¿Qué habilidades y keywords refuerzas aquí?

• Manejo de transiciones CSS: transition, duración y timing function.
• Transformaciones con translate en ejes X/Y.
• Sombras con box-shadow y opacidad RGBA.
• Estados interactivos con hover en contenedor y en elementos internos.
• Jerarquía temporal con delay para escalonar animaciones.

¿Te animas a aplicar estos patrones en tu UI? Cuenta cómo vas a combinar transform y box-shadow, o qué delay te funciona mejor en títulos y textos.