如何确保CSS动画按时完成？性能受限场景的解决方案

正如其他人所指出的，CSS动画可能会因性能问题意外卡顿或暂停，例如JavaScript主线程繁忙的场景。

在使用第三方库或框架的网页中，我们无法掌控整个Web应用，因此无法保证JavaScript的运行状态符合预期。

由于目前无法提升动画相对于其他浏览器任务的优先级，也无法通过降低JavaScript发起的浏览器任务优先级来优先处理CSS任务（且这类操作可能引发意外后果），因此我希望聚焦于动画本身的控制。

具体问题 #

• 是否存在一种优先使用纯CSS的方式，告知浏览器即便存在性能问题，动画也应通过丢帧来确保按时到达最终状态？
• 如果存在这种方式，是否仅能通过CSS动画语法实现，还是需要借助requestAnimationFrame()或GSAP等库这类其他技术？

我曾设想过类似animation-fill-mode与text-rendering: optimizeSpeed;的组合来控制动画渲染的优化方向，但未找到相关有效资料。

尝试代码 #

初始实现代码

.drawer {
    position: fixed;
    left: 100%;
    transition: transform 3s;
    background: blue;
}

.drawer.open {
    transform: translateX(-400px);
    animation-name: slidein;
    animation-duration: 3s;
    animation-fill-mode: forwards;
}

@keyframes slidein {
  0%  { transform: none; }
  25% { transform: translateX(-100px); }
  50% { transform: translateX(-200px); }
  75% { transform: translateX(-300px); }
  100%{ transform: translateX(-400px); }
}

<div class="drawer" id="drawer">drawer</div>
<a href="javascript:showDrawer()">show drawer</a>

简化复现代码

.drawer {
  position: fixed;
  left: 100%;
  transition: transform 3s;
  background: blue;
}

.drawer.open {
  transform: translateX(-400px);
  animation-name: slidein;
  animation-duration: 3s;
}

@keyframes slidein {
  0%   { transform: none; }
  25%  { transform: translateX(-100px); }
  50%  { transform: translateX(-200px); }
  75%  { transform: translateX(-300px); }
  100% { transform: translateX(-400px); }
}

<div>
  <div class="drawer open" id="drawer">drawer</div>
  <a href="javascript:showDrawer()">show drawer</a>
</div>

尽管这是最小复现示例，但脱离上下文后难以复现问题。可尝试使用开发者工具的CPU节流功能查看问题表现。

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