I am looking to create a simulation of rising and falling sea levels. Currently, when I click the button, the level rises from its starting point to the top, but I am unsure how to achieve this effect in my code. Below is the code I have written so far, any help is appreciated!
Is there an alternative method in CSS to indicate the current sea level instead of directly setting the keyframes "rise" with a specific value?
<button id="btn" onclick="startFunction()">Click</button>
<div class="sea" id="searise"></div>
<style>
.sea {
position: absolute;
height: 650px;
left: 0;
bottom: 0;
right: 0;
background: #a4c2ef;
animation: wave 3s ease-in-out infinite;
z-index: 0;
}
@keyframes wave {
0% {
top: 300px;
}
50% {
top: 290px;
}
100% {
top: 300px;
}
}
@keyframes rise {
0% {
top: 290px;
height: 650px;
}
100% {
top: 0;
height: 850px;
}
}
</style>
<script>
function startFunction() {
var searise = document.getElementById("searise");
searise.style.animation = "rise 10s forwards";
}
</script>