Smooth property changes over time. Hover or interact with elements to see transitions in action.
1. Simple Transición de Color
Pasa el ratón para ver background color change smoothly.
Pasa el Ratón
transition: background-color 0.5s ease;
2. Múltiples Propiedades
Color, transform, and shadow transition together.
Pasa el Ratón
transition:
background-color 0.3s,
transform 0.5s,
box-shadow 0.3s;
3. Micro-Interacción de Botón
Professional button with lift effect.
transition:
background-color 0.2s,
transform 0.2s,
box-shadow 0.2s;
4. Transición de Superposición
Smooth overlay reveal on hover.
.card::after {
opacity: 0;
transition: opacity 0.3s;
}
.card:hover::after {
opacity: 1;
}
5. Comparación de Funciones de Temporización
Pasa el ratón sobre each bar to see different easing curves in action.
ease (default)
linear
ease-in
ease-out
ease-in-out
transition-timing-function: ease | linear | ease-in | ease-out | ease-in-out |
cubic-bezier(x1, y1, x2, y2);