Correct syntax for using @keyframes float in Style class name (UI Builder)

[carlosgonza]

Hello everyone,

I’m trying to apply a simple floating animation to an Image component in the UI Builder. In the Page Classes and Rules configuration, I created a class with the following rule:

==========================================

* {

    width: 300px;

    align-self: flex-end;

    box-shadow: var(--now-static-drop-shadow--xxl);

    margin-top: var(--now-scalable-space--lg);

    max-width: 10%;

    float: left;

    position: absolute;

    top: 20px;

    right: 20px;

    z-index: 10;

    animation: float 3s ease-in-out infinite;

}

@keyframes float {

    0% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-20px);

    }

    100% {

        transform: translateY(0);

    }

}
==========================================

The issue is that when I save, the editor removes the @keyframes block.

My question is: what is the correct syntax or the proper place to declare @keyframes so that it works with a Style class name in the UI Builder?

Thanks in advance for any guidance or practical examples!