Curso de CSS
Dale estilo y vida a la web.
Aprende CSS con ejemplos interactivos y crea proyectos reales.
transition anima el cambio entre dos estados de una propiedad CSS, como al pasar el mouse sobre un botón.
Explicación
transition necesita una propiedad, una duración y (opcionalmente) un estado que la dispare:
transition: propiedad duración;Define qué propiedad animar y cuánto tarda el cambio, en segundos.
:hoverPseudo-clase que aplica un estilo mientras el mouse está sobre el elemento; combinada con transition, crea la animación.
ease, linear, ease-in-outFunciones de tiempo: controlan si la animación acelera, desacelera o va a velocidad constante.
Reto rápido
Agrega box-shadow a la lista de propiedades animadas en transition y a :hover.
En esta lección
- Ejemplo interactivo
- Explicación de cada etiqueta
- Cuándo usarlo
- Errores comunes
Consejo
transition: all 0.3s ease anima cualquier propiedad que cambie, pero es más eficiente (y predecible) especificar solo las propiedades que realmente necesitas animar.
Dato extra
Las transiciones solo animan entre dos estados (por ejemplo, normal y :hover). Para animaciones más complejas con varios pasos, se usan @keyframes.
Error común
Poner transition en el estado :hover en vez del estado normal del elemento: la animación solo funciona en un sentido (al entrar) pero no al salir.
Siguiente paso
Ya animas cambios simples de estado. Ahora veamos transform, la propiedad detrás de casi todo movimiento en CSS.
Ir a la siguiente lección