Elige qué se anima y cuánto dura, describe el estado al que llega el elemento y alterna la vista previa antes de copiar las dos reglas que genera el taller.
Se ejecuta localmente en tu navegadorEl generador devuelve un par de reglas: una regla base con la transición abreviada —propiedad, duración, curva y retardo— y una regla de destino con la transformación, la opacidad, el color de fondo y el filtro a los que pasa el elemento. Al alternar el elemento de la vista previa se ejecuta ese par sobre un nodo real del DOM.
Cada control se exporta tal como lo muestra el indicador. Los valores se mantienen dentro del rango indicado junto a cada campo, y un campo vacío recupera su último valor válido en lugar de exportar un cero. El cálculo ocurre en la página: no se sube nada y la herramienta sigue funcionando sin conexión.
La primera regla contiene la transición abreviada: qué propiedad se anima, cuánto dura, con qué curva y con qué retardo. La segunda describe el estado destino —transformación, opacidad, color de fondo y un ligero filtro de brillo y saturación— y se aplica al alternar el elemento.
Solo se animan las propiedades que aparecen en la lista de transición. Si la lista dice opacity, la transformación, el color y el filtro del estado destino se aplican de una vez; con all, todos los valores que cambian se mueven juntos. La vista previa se comporta igual.
El selector ofrece all, transform, opacity, background-color y filter, las cinco cosas que cambia el elemento de la vista previa. Nombrar una mantiene la lista corta, que suele ser lo que necesita un estado hover o focus; all es la opción cómoda mientras experimentas.
Los ajustes predefinidos cargan esa elección: Hover lift anima all, Fade anima opacity, Zoom y Soft spin animan transform y Color swap anima background-color. Los demás controles siguen describiendo el estado destino, así que puedes editar un ajuste y conservar lo que te sirva.
La duración va de 0 a 5000 ms y el retardo de 0 a 3000 ms; ambos se redondean a milisegundos enteros. La lista de curvas incluye las cinco palabras clave de CSS y dos curvas de Bézier cúbicas, y el indicador siempre imprime el valor que aparece en la regla exportada.
Como los números se limitan al rango indicado en cada campo, la regla exportada nunca lleva un valor que el navegador vaya a descartar o reinterpretar; un tiempo negativo, por ejemplo, se lee como retardo en lugar de duración. Prueba las reglas copiadas en el elemento real: una transformación en un ancestro se compone con la que animas.