Generador de transiciones CSS Genera transiciones CSS con propiedades personalizables, duración, suavizado y efectos de hover.

La propiedad de transición CSS es un atajo para transition-property, transition-duration, transition-timing-function y transition-delay. La transition-property puede apuntar a propiedades específicas o utilizar all para todo. La duración y el retraso utilizan segundos o milisegundos. La función de temporización define la curva de velocidad: linear es una velocidad constante, ease comienza lento luego acelera y luego desacelera, ease-in comienza lento, ease-out termina lento. Las curvas personalizadas utilizan la función cubic-bezier(x1, y1, x2, y2) donde los cuatro valores definen puntos de control. Los valores fuera del rango 0-1 para y crean efectos de rebote/salto. Para mejorar el rendimiento, transiciona solo transform y opacidad cuando sea posible. Se pueden definir varias transiciones con valores separados por comas para diferentes propiedades con temporizaciones diferentes. Las transiciones se activan mediante cualquier cambio de propiedad, incluidos los valores establecidos por JavaScript y las adiciones de clase.