How to use the animation css property in remi

[kuhaku43]

I'm trying to make a web page with animations, at first I was using threads to manage the animations. But I realized that the css has a property that facilitates the use of some animations. I would like to know if it is possible and how I could implement this property. Thank you very much in advance.

[dddomodossola]

Hello @kuhaku43 ,

You can add css content to remi from within the application, by appending css to the page header or by using a css file. Here is an example using the css appended to the page header:

import remi.gui as gui
from remi import start, App

class MyApp(App):
    def main(self):
        my_css_head = """
            <style>
            @keyframes mymove {
                from {top: 0px;}
                to {top: 200px;}
            }
            </style>
            """
        self.page.children['head'].add_child('mycss', my_css_head)

        main_container = gui.Container(width=300, height=300, style={'margin': '0px auto'})
        animated_box = gui.Widget(width = 50, height = 50)
        main_container.append(animated_box)

        animated_box.style['animation'] = 'mymove 5s infinite'
        animated_box.style['position'] = 'relative'
        animated_box.style['background-color'] = 'red'

        # returning the root widget
        return main_container

if __name__ == "__main__":
    # starts the webserver
    start(MyApp, address='0.0.0.0', port=0, start_browser=True)

[kuhaku43]

Thank you very much for the clarification. I had tried something similar but without the "