Brave浏览器:css动画不工作(但在firefox中工作)

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

:

<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中，圆圈上下移动，鼠标悬停时圆圈会变大。在《勇者》中，鼠标悬停时它们既不会移动也不会变大。