如何用animation-timeline属性优化滚动驱动动画流畅度并添加延迟？

我正在使用CSS的滚动驱动动画，搭配animation-timeline属性。但遇到了一个问题：PC端鼠标滚动通常步长较大且不够平滑，导致动画略显卡顿，我希望为动画添加延迟来提升流畅度。尝试过传统CSS属性animation-delay，但它在搭配滚动驱动动画和animation-timeline属性时似乎不起作用。

我期望的动画效果是类似使用Lenis JS库实现的平滑滚动动画，但我的目标是不使用JS库，仅通过CSS复刻这种顺滑的缓动体验。

用Lenis实现的目标效果（JS方案） #

JavaScript代码 #

// Initialize Lenis
const lenis = new Lenis();

// Listen for the scroll event and log the event data
lenis.on('scroll', (e) => {
  console.log(e);
});

// Use requestAnimationFrame to continuously update the scroll
function raf(time) {
  lenis.raf(time);
  requestAnimationFrame(raf);
}

requestAnimationFrame(raf);

CSS代码 #

.animation-element-wrapper {
  display: grid;
  justify-content: center;
  background-color: green;
}

.animation-element {
  background-color: red;
  height: 50px;
  width: 50px;
  animation: move;
  animation-timeline: view(block);
}

@keyframes move {
  from {
    transform: translateY(0) rotate(0deg);
  }
  to {
    transform: translateY(-150px) rotate(360deg);
  }
}

/* Smooth scroll styling */
html.lenis, html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

HTML代码 #

<script src="https://unpkg.com/lenis@1.1.14/dist/lenis.min.js"></script>
<h1>Hello World!</h1>
<h1>Hello World!</h1>
<h1>Hello World!</h1>
<h1>Hello World!</h1>
<h1>Hello World!</h1>
<h1>Hello World!</h1>
<h1>Hello World!</h1>
<h1>Hello World!</h1>
<h1>Hello World!</h1>

<div class="animation-element-wrapper">
  <div class="animation-element"></div>
</div>

<h1>Hello World!</h1>
<h1>Hello World!</h1>
<h1>Hello World!</h1>
<h1>Hello World!</h1>
<h1>Hello World!</h1>
<h1>Hello World!</h1>
<h1>Hello World!</h1>
<h1>Hello World!</h1>
<h1>Hello World!</h1>

无平滑效果的原生CSS动画（卡顿示例） #

CSS代码 #

.animation-element-wrapper {
  display: grid;
  justify-content: center;
  background-color: green;
}

.animation-element {
  background-color: red;
  height: 50px;
  width: 50px;
  animation: move;
  animation-timeline: view(block);
}

@keyframes move {
  from {
    transform: translateY(0) rotate(0deg);
  }
  to {
    transform: translateY(-150px) rotate(360deg);
  }
}

HTML代码 #

<h1>Hello World!</h1>
<h1>Hello World!</h1>
<h1>Hello World!</h1>
<h1>Hello World!</h1>
<h1>Hello World!</h1>
<h1>Hello World!</h1>
<h1>Hello World!</h1>
<h1>Hello World!</h1>
<h1>Hello World!</h1>

<div class="animation-element-wrapper">
  <div class="animation-element"></div>
</div>

<h1>Hello World!</h1>
<h1>Hello World!</h1>
<h1>Hello World!</h1>
<h1>Hello World!</h1>
<h1>Hello World!</h1>
<h1>Hello World!</h1>
<h1>Hello World!</h1>
<h1>Hello World!</h1>
<h1>Hello World!</h1>

提问 #

两者流畅度差异明显，我希望仅用CSS复刻更顺滑的体验。请问是否仅通过CSS就能为这类动画添加延迟或优化流畅度，还是仍需JavaScript？我优先寻求CSS解决方案。

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