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;

}

@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!

[shubhamseth · Accepted solution]

@carlosgonza 

This is expected behavior. UI Builder Page Classes only support scoped CSS rules, and at-rules such as @keyframes, @media, and @import are not supported. That's why the editor removes the @keyframes block when you save.

Options

• OOB: UI Builder does not currently support defining custom CSS animations via Page Classes.
• Custom Component: If you need animations like floating, create a custom UI Framework (Now Experience) component where @keyframes can be defined in the component's stylesheet.
• Alternative: Use supported styling options (spacing, positioning, shadows, etc.) in Page Classes, but animations require custom development.

So, there is not a different syntax or location within Page Classes where @keyframes will work the limitation is by design.

Hope this helps.