57 - Transiciones en CSS: Guía Completa con Ejemplos ✨

---

57 - Transiciones en CSS: Dale movimiento a tu web ✨

Las transiciones CSS permiten animar cambios de estilos de forma suave cuando un elemento cambia de estado, por ejemplo al pasar el ratón. Esto mejora la experiencia visual y hace la web más atractiva.

---

1. Transitions

La propiedad transition controla la duración, la propiedad afectada, la curva de velocidad y el retraso de la transición de un elemento.

Hover me

.ejemplo {
  transition: all 0.5s ease;
}
.ejemplo:hover {
  transform: scale(1.2) rotate(15deg);
}

---

2. Cómo usar las transiciones CSS?

Para usar transiciones, define la propiedad a animar, la duración, la función de tiempo y opcionalmente un retraso: transition: propiedad duración timing-function retraso;

Hover me

.ejemplo-multiple {
  width: 100px;
  height: 100px;
  background-color: #333; /* Fondo inicial oscuro */
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition: width 0.5s, height 0.5s, background-color 0.5s;
}
.ejemplo-multiple:hover {
  width: 200px;
  height: 200px;
  background-color: lightcoral;
}

---

3. Retrasar el efecto de la transición

Con transition-delay puedes retrasar el inicio de la transición.

Hover me

.ejemplo-delay {
  transition: transform 0.5s ease 0.3s;
}
.ejemplo-delay:hover {
  transform: translateX(50px);
}

---

4. Especifique la Curva de Velocidad

La propiedad transition-timing-function define la velocidad de la transición: ease, linear, ease-in, ease-out, etc.

Hover me

.ejemplo-timing {
  transition: transform 1s linear;
}
.ejemplo-timing:hover {
  transform: rotate(45deg);
}

---

5. Transición y Transformación

Puedes combinar transform con transition para animaciones más complejas.

Hover me

.ejemplo-transform {
  transition: all 0.7s ease;
}
.ejemplo-transform:hover {
  transform: rotateY(180deg) scale(1.2);
}

---

6. Tabla: Transition Properties

Property	Description
transition	A shorthand property for setting all four transition properties
transition-delay	Specifies a delay (in seconds) for the transition effect
transition-duration	Specifies how long the transition takes
transition-property	Specifies the CSS property the transition is for
transition-timing-function	Specifies the speed curve of the transition effect

---

Ir al índice