If the object in the first animation moves within a range constantly, how do I initiate the second animation for the object in particular position?

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>