CSS Transition Generator
Configure CSS transitions with hover preview.
Transicion 1
Pasa el cursor
.element {
transition: all 0.3s ease 0s;
}
.element:hover {
/* apply your hover styles here */
}Acerca de esta herramienta
El Generador de Transiciones CSS permite configurar la propiedad abreviada transition estableciendo la propiedad objetivo, duracion, funcion de tiempo y retraso. La vista previa interactiva muestra el comportamiento antes de copiar el codigo.
Las transiciones CSS crean cambios de estado suaves entre dos valores CSS, activadas por pseudoclases como :hover, :focus o cambios de clase via JavaScript.
Cómo usar
- Selecciona la propiedad CSS a transicionar (o usa all).
- Establece la duracion — cuanto tiempo tarda la transicion (ej: 0.3s).
- Elige una funcion de tiempo para controlar la curva de aceleracion.
- Opcionalmente agrega un retraso antes de que comience la transicion.
- Pasa el cursor sobre el cuadro de vista previa para ver el efecto en vivo, luego copia el CSS.
Casos de uso
Los desarrolladores usan transiciones para efectos hover en botones, escalado de tarjetas y cambios de color en enlaces de navegacion. Los disenadores de formularios las usan para estilos de enfoque de entrada.
Preguntas frecuentes
- Cual es la diferencia entre transition y animation? — Las transiciones reaccionan a un cambio de estado (como hover); las animaciones se ejecutan automaticamente o en bucle usando keyframes.
- Puedo transicionar multiples propiedades? — Si. Haz clic en Agregar transicion para agregar multiples reglas de propiedad separadas por comas.
- Que propiedades pueden transicionarse? — La mayoria de propiedades con valores numericos: opacity, color, transform, dimensiones, etc. Propiedades como display no pueden transicionarse.