jquery.app
Espanol
EnglishDeutschFrancaisEspanol日本語Nederlands

Herramientas CSS

Gratis Generador de transiciones discretas

Genera CSS para animar elementos que aparecen o desaparecen.

Cargando herramienta...

Qué es Generador de transiciones discretas?

CSS tradicionalmente no puede hacer transicion entre display: none y display: block. La propiedad transition-behavior: allow-discrete y la regla @starting-style ahora permiten transiciones suaves para elementos que aparecen y desaparecen. Esto es esencial para dialogos, popovers, tooltips y paneles de divulgacion.

Respuesta rápida

Las transiciones discretas permiten transiciones CSS para display:none y otras propiedades discretas cuando un elemento entra o sale del DOM. Use @starting-style para definir el estado inicial antes de que el elemento aparezca.

Last updated: 2026-05-25

Limitaciones

  • Las transiciones discretas para display requieren Chrome 117+ o Safari 17.5+. El soporte de Firefox esta detras de una bandera a principios de 2026.
  • @starting-style es necesario para la animacion de entrada. Sin el, el elemento aparece en su estado final antes de comenzar la transicion.
  • Las transiciones discretas solo animan la entrada y salida donde cambia display. No se admiten transiciones de estado intermedio para propiedades discretas.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

Cómo usar esta herramienta

  1. Elija el tipo de elemento que desea animar: dialogo, popover o panel de divulgacion.
  2. Establezca propiedades de animacion de entrada y salida como opacity y transform.
  3. La herramienta genera el CSS de @starting-style y transition.
  4. Copie el CSS y apliquelo a su elemento dialog, popover o details.

Para qué puedes usarla

  • Agregar un efecto de aparicion gradual a un dialogo modal cuando se abre.
  • Crear una animacion de deslizamiento hacia abajo para paneles de divulgacion.
  • Construir animaciones suaves de entrada y salida para popovers.

Casos de uso

Ejemplos prácticos

Ejemplo

Animacion de aparicion de dialogo

Un dialogo aparece gradualmente con opacity y escala de 0.9 a 1 usando @starting-style. Al cerrarse, se desvanece usando la misma transicion.

Ejemplo

Transicion de deslizamiento de popover

Un popover se desliza desde arriba con una transicion suave y se desvanece al cerrarse, usando overlay y transition-behavior: allow-discrete.

Errores comunes

  • Olvidar agregar transition-behavior: allow-discrete al elemento en transicion.
  • No considerar la propiedad overlay en las transiciones de dialog y popover.
  • Crear animaciones demasiado lentas que frustran a los usuarios.

Verificación

  1. Pruebe las transiciones de entrada y salida en Chrome o Safari y verifique que la animacion se reproduzca en ambas direcciones.
  2. Revise la consola del navegador para detectar advertencias de transicion CSS relacionadas con propiedades discretas.

FAQ

Preguntas sobre Generador de transiciones discretas

Que hace transition-behavior: allow-discrete?

Permite transiciones para propiedades que normalmente no se pueden transitionar, como display y overlay.

Necesito @starting-style?

Si. Define el estado inicial del elemento antes de que aparezca, como opacity: 0 o valores de transform. Sin el, el elemento aparece primero en su estado final.

Que propiedades CSS son normalmente discretas y no se pueden transitionar?

Display, overlay, content-visibility y la transicion inicial de mix-blend-mode son ejemplos de propiedades discretas. No tienen estados intermedios. La regla transition-behavior: allow-discrete indica al navegador que espere hasta el final de la duracion de la transicion antes de cambiar de estado.

Puedo hacer transicion entre display: none y display: block?

Si, con transition-behavior: allow-discrete y @starting-style. Defina el elemento en ambos estados: @starting-style establece el estado oculto inicial, la regla regular establece el estado visible, y transition-behavior: allow-discrete hace que el cambio de display espere hasta que la transicion termine.

Herramientas relacionadas

Más herramientas css

Prueba también

Prueba también