Transiciones y efectos hover

Parte de la sección CSS Mastery del Journey de HTML de Coddy — lección 24 de 43.

Una transición te permite cambiar una propiedad suavemente a lo largo del tiempo en lugar de hacerlo instantáneamente.

selector {
  transition: property duration timing-function delay;
}

propiedad: La propiedad CSS que deseas transicionar (por ejemplo, background-color, width, opacity).
duración: El tiempo que tarda la transición en completarse (por ejemplo, 1s para 1 segundo).

timing-function: Cómo progresa la transición (por ejemplo, linear, ease, ease-in).
delay: Cuánto tiempo esperar antes de comenzar la transición (opcional).

Por ejemplo:

.button {
  background-color: green;
  transition: background-color 0.3s ease;
}
.button:hover {
  background-color: blue;
}

Cuando pases el cursor sobre el botón, su color de fondo cambiará de verde a azul durante 0.3 segundos.

Ponte a prueba

Esta lección incluye un breve cuestionario. Empieza la lección para responderlo y registrar tu progreso.

Ponte a prueba

Esta lección incluye un breve cuestionario. Empieza la lección para responderlo y registrar tu progreso.

Desafío

Fácil

Añade una propiedad transition a .card para que los cambios en el color de fondo y box-shadow ocurran suavemente durante 0.4 segundos con una función de tiempo ease.

Hoja de referencia

Una transición te permite cambiar una propiedad suavemente a lo largo del tiempo en lugar de hacerlo instantáneamente.

selector {
  transition: property duration timing-function delay;
}

property: La propiedad CSS que deseas transicionar (por ejemplo, background-color, width, opacity)
duration: El tiempo que tarda la transición en completarse (por ejemplo, 1s para 1 segundo)
timing-function: Cómo progresa la transición (por ejemplo, linear, ease, ease-in)
delay: Cuánto tiempo esperar antes de comenzar la transición (opcional)

.button {
  background-color: green;
  transition: background-color 0.3s ease;
}
.button:hover {
  background-color: blue;
}

Pruébalo tú mismo

<!DOCTYPE html>
<html>
<head>
  <style>
    /* Write your CSS here */
    .card {
      background-color: white;
      padding: 10px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }
    
  </style>
</head>
<body>
  <div class="card">
    Hover over me!
  </div>
</body>
</html>

Ponte a prueba

Esta lección incluye un breve cuestionario. Empieza la lección para responderlo y registrar tu progreso.