I want to make a sea level rise up and down originally. When I press the button, it rises from the particular sea level to the top, but I don’t know how to do it. Below is my code, thank you!!!
In the css part, instead of setting keyframes “rise” top:290px, is there any other way to express the current sea level?
<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>