如何在海平面循环波动的特定位置触发上升动画？

核心问题是你的rise动画硬编码了起始位置，导致点击时海平面会跳转到固定值，而非当前波动的位置。可以通过以下方式解决：

1. 调整波动动画，用transform替代top #

避免同时使用bottom和top属性造成布局冲突，用transform: translateY()实现波动，这样元素的基础布局属性（height、bottom）保持稳定，方便后续上升动画过渡。

2. 让上升动画自动继承当前状态 #

删除rise动画中0%的固定属性定义，浏览器会自动将元素当前的计算样式作为动画起始状态，实现从当前波动位置平滑上升。

完整修正代码 #

<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%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-10px);
    }
  }
  
  @keyframes rise {
    100% {
      top: 0;
      height: 850px;
      transform: translateY(0);
    }
  }
</style>
<script>
  function startFunction() {
    const searise = document.getElementById("searise");
    searise.style.animation = "rise 10s forwards";
  }
</script>

关键说明 #

• 波动动画通过transform: translateY()实现，仅做视觉位移，不修改元素的布局位置，确保点击时元素的top、height属性处于可预测的基础状态。
• rise动画只定义最终状态（100%），浏览器会自动以当前元素的实时状态作为动画起点，避免固定值导致的跳转问题。
• forwards关键字让动画结束后保持最终的顶部状态，不会回弹。

内容的提问来源于stack exchange，提问作者wingck