how to animate a variable change in css keyframes - css

Question

I want to animate the waves to go up when i click on the div i cant get the wave to animate when i change the heigt on the animation it self.
.tsx
<div className={styles.circle}>
<div className={styles.wave}></div>
</div>
.css
.circle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-190%, -50%);
width: 25%;
height: 60%;
background: #ccc;
box-shadow: 0 0 0 5px #fff;
border-radius: 50%;
overflow: hidden;
}
.wave {
position: relative;
width: 100%;
height: 100%;
background: #4973ff;
border-radius: 50%;
box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.5);
}
.wave:before,
.wave:after {
content: "";
position: absolute;
width: 200%;
height: 200%;
top: 0;
left: 50%;
transform: translate(-50%, -75%);
background: #000;
}
.wave:before {
border-radius: 45%;
background: rgb(255, 255, 255);
animation: animate 5s linear infinite;
}
.wave:after {
border-radius: 40%;
background: rgb(255, 255, 255, 0.5);
animation: animate 10s linear infinite;
}
#keyframes animate {
0% {
transform: translate(-50%, var(--water)) rotate(0deg);
}
100% {
transform: translate(-50%, var(--water)) rotate(360deg);
}
}
I tried putting translate: transform 2s linear but that didnt work for me eighter do you guys have any idea beaces when i change the
:root {
--water: -90%
}
to
:root {
--water: -80%
}
it will just snap and not animate