BUG: The documented way to parse @keyframes does not work

GrapesJS version

• I confirm to use the latest version of GrapesJS

What browser are you using?

Chrome v107

Describe the bug

How to reproduce the bug?

1. Follow this instructions here to create your own CSS parser, and put in a @keyframes rule css string. I used the pre-built posts parser here: here
2. The structure comes out of the parser and matches the documentation fine (see attached screenshot), but no animation occurs <img width="302" alt="Screen Shot 2022-12-01 at 8 59 53 PM" src="https://user-images.githubusercontent.com/12617956/205198051-0dc468a7-c0cb-4649-9429-a92c001e4117.png">

What is the expected behavior? An animation

What is the current behavior? The element does not animate. This is the HTML structure... I may be wrong but I don't think it can parse that as an animation. The element with animation-name: spinAnimation is definitely not seeing it. <img width="483" alt="Screen Shot 2022-12-01 at 9 07 50 PM" src="https://user-images.githubusercontent.com/12617956/205198530-5668bcea-2d17-4f8e-8774-9996e7310b3d.png">

If I use the CssComposer workaround documented here, the animation works. However this isn't a good approach because I need a unique animation name for each component I drop on the editor. For instance, I might have 5 different components that rotate at different speeds, and I'd need to manually manage all the animation names if I use the CssComposer, which I believe is a global scope.

If is necessary to execute some code in order to reproduce the bug, paste it here below: Here is my model definition:

const child = {
    model: {
        defaults:{
            tagName: 'div',
            attributes:{
                class:'spin-element_child'
            },
            draggable:false,
            removable:false,
            droppable:false,
            highlightable:false,
            locked:true,
            styles: `
                @keyframes spinAnimation{
                    0% {
                        transform:rotate(0deg)
                    }
                    100% {
                        transform:rotate(360deg)
                    }
                }
                .spin-element_child{
                    display:inherit;
                    height:inherit;
                    width:inherit;
                    background-color:rgb(0 0 255);
                    animation-name: spinAnimation;
                    animation-duration: 1000ms;
                }
            `
        }
    }
}

Code of Conduct

• I agree to follow this project's Code of Conduct