Храбрый браузер: CSS-анимация не работает (но работает в Firefox)

Кодепен: 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;
        }

В Firefox круги перемещаются вверх и вниз и увеличиваются при наведении курсора мыши. В Brave они не двигаются и не увеличиваются при наведении мыши.

Есть ли способ заставить этот код работать в браузере Brave?