GrapesJS doesn't understand '@-webkit-keyframe' CSS rules.

I just came here to open the same issue! :(

@artf, you can add this code to check it.

editor.CssComposer.addRules(`
    .animate__animated {
      -webkit-animation-duration: 300ms;
      animation-duration: 300ms;
      -webkit-animation-fill-mode: both;
      animation-fill-mode: both;
    }
    @keyframes fadeIn {
      0% {
        opacity: 0
      }

      to {
        opacity: 1
      }
    }
    .animate__fadeIn {
      -webkit-animation-name: fadeIn;
      animation-name: fadeIn
    }
`);

Reported and fixed here

Thanks for reporting this, @henry-mmw.

The issue with GrapesJS doesn't understand '@-webkit-keyframe' CSS rules. appears to be a race condition or state management timing problem. This typically happens when component lifecycle events and DOM modifications overlap, creating an inconsistent state.

What to try:

1. Add a setTimeout wrapper to ensure the DOM has settled:

setTimeout(() => {
  // your operation here
}, 0);

2. Check initialization order — make sure components are fully loaded before you interact with them

3. Use the editor's event system — listen to completion events:

editor.on('component:mount', (component) => {
  // safe to interact with component here
});

Recommended next steps:

• Test with the latest GrapesJS version if you haven't
• Provide a minimal reproducible example (CodeSandbox) — this helps the team identify the root cause faster
• Include GrapesJS version, browser, and console errors in your report