html - How to animate a relative clip-path for a header with wavy bottom border? - Stack Overflow

admin管理员组

文章数量:1122832

I'm creating an animated header with a wavy bottom border using clip-path and scroll-driven animations. Currently, my solution uses SVG paths with absolute coordinates at the control points. I'd like to switch to relative paths for better responsiveness. Meaning that the path is scaled to fit the container. Example with absolute SVG Paths in this Codepen.

@keyframes straighten-wave {
  0% {
    clip-path: path('m0,0h1440v150c0,0,-119.6,-18.8,-196.9,-23c-143.8,-7.7,-224,26.2,-372.1,22c-160.5,-2.6,-249.9,-47.4,-414.5,-49c-179.3,-1.7,-456.5,50,-456.5,50v-150');
    background-color: rgba(255, 200, 200, 0.8);
  }
  100% {
    clip-path: path('m0,0h1440v90c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c-1440,0,-1440,0,-1440,0v-90');
    background-color: rgba(200, 255, 200, 0.8);
  }
}

header {
  position: sticky;
  top: 0;
  height: 150px;
  backdrop-filter: blur(8px);
  z-index: 100;
  animation: straighten-wave linear both;
  animation-timeline: scroll();  
}

When I try using objectBoundingBox units, the animation breaks - it jumps instantly between states instead of smoothly transitioning.

Is it possible to animate relative clip-paths smoothly? Are there alternative approaches to achieve this wavy border effect with responsive animations? Do I need to try something with more flexibility outside CSS?

本文标签： htmlHow to animate a relative clippath for a header with wavy bottom borderStack Overflow