Brave browser: css animation doesn't work (but works in firefox)

Codepen: https://codepen.io/sabeser/pen/RwYzJpd

HTML:

<div id='wrapper'>
    <div class='circle'></div>
    <div class='circle'></div>
</div>

css:

      :root {
            --scale--ratio: 1;
        }

        #wrapper {
            background-color: yellow;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 50vh;
            width: 50vw;
        }

        .circle {
            background-color: red;
            width: 50px;
            height: 50px;
            margin: 1em;
            border-radius: 20em;
            /* set default scale */
            scale: var(--scale--ratio);
            /* enable scale animation */
            transition: scale 1.1s;
            -webkit-animation: floataround 1.1s infinite alternate;
            animation: floataround 1.1s infinite alternate;
        }

        @keyframes floataround {
            0% {
                translate: 0;
            }
            100% {
                translate: 0 -8px;
            }
        }

        .circle:hover {
            /* update scale */
            --scale--ratio: 1.2;
            cursor: pointer;
            background-color: green;
        }

In Firefox the circles move up and down and get bigger on mouse hover. In Brave they neither move nor get bigger on mouse hover.

Is there any way to make this code work in Brave browser?

The problem is not with your code but with the Brave browser because some animations are not supported in this browser. If you have noticed, there are some new css features in browsers that are implemented with -webkit-,-o-,-moz-,-ms-. For this reason, That should update your Brave browser with css features.