GrapesJS no entiende las reglas CSS de '@-webkit-keyframe'.

¡Solo he venido aquí para abrir el mismo problema! :(

@artf, puedes añadir este código para comprobarlo.

'''js editor. CssComposer.addRules(' .animate__animated { -webkit-animación-duración: 300ms; Duración de la animación: 300 ms; -webkit-animación-modo de relleno: ambos; modo de animación: ambos; } @keyframes fadeIn { 0% { opacidad: 0 }

a { opacidad: 1 } } .animate__fadeIn { -webkit-animation-name: fadeIn; Nombre de la animación: FadeIn } `);

! [imagen](https://user-images.githubusercontent.com/2287371/207124934-3d9bd01a-3cc9-4f00-aa8c-5b7a1759d30f.png)

Reportado y corregido aquí

Gracias por informar de esto, @henry-mmw.

El problema con GrapesJS no entiende las reglas CSS '@-webkit-keyframe'. parece ser un problema de condición de carrera o de gestión de estado. Esto suele ocurrir cuando los eventos del ciclo de vida de los componentes y las modificaciones del DOM se superponen, creando un estado inconsistente.

Qué probar:

1. Añadir un envoltorio setTimeout para asegurar que el DOM se ha asentado: '''javascript setTimeout(() => { Tu operación aquí }, 0);

2. **Comprobar el orden de inicialización** — asegúrate de que los componentes estén completamente cargados antes de interactuar con ellos

3. **Utilizar el sistema de eventos del editor** — escuchar los eventos de finalización:
'''javascript
editor.on('component:mount', (component) => {
  Es seguro interactuar con el componente aquí
});

Recomendaciones de siguientes pasos:

• Prueba con la última versión de GrapesJS si no lo has hecho
• Proporcionar un ejemplo mínimo reproducible (CodeSandbox) — esto ayuda al equipo a identificar la causa raíz más rápido
• Incluir errores de GrapesJS, de navegador y de consola en tu informe