CSS 框阴影动画像素艺术闪烁

Question

部分出于趣味，部分出于我的设计理念，我正在尝试将动画 gif 转换为纯动画 CSS。

它几乎可以正常工作，但我遇到了一个障碍，我不确定是什么导致了我的问题，或者我该如何解决它。我很遗憾地怀疑我只是遇到了技术的限制。

我用来测试的 gif 是这样的：https://us.v-cdn.net/5018289/uploads/editor/yj/lcdjneh1yoxv.gif

至于实际的 CSS，我一直在尝试在此处实现该方法（动画 box-shadow 属性），因为它似乎是最可行的：https://codepen.io/andrewarchi/pen/OXEEgL

#ash::after {
  animation: ash-frames 0.4s steps(1) infinite;
}

@keyframes ash-frames {
    0% {box-shadow: 32px 8px #181818, 40px 8px #181818,...}
    ...
}

在给定的示例中，动画看起来相当无缝，所以我认为值得一试。明显差异：我使用的 gif 具有更多帧和更多像素。

作为一个快速概述，我的 CSS（我正在使用供应商标签等，这只是一个示例）：

.pixel-art-3940::after {
    animation: pixel-art-3940-frames 1s steps(5, end) infinite;
}

@keyframes pixel-art-3940-frames {
    0% {box-shadow: 112px 68px rgba(77, 69, 64, 1),...}
    16.666666666666668% {box-shadow:115px 65px rgba(77, 69, 64, 1),...}
    ...
}

动画似乎确实可以正常工作，但是动画上有强烈的“闪烁”效果。见下文：

我已经尝试了 Chrome 中“闪烁过渡”的常用解决方案 - 例如将 -webkit-backface-visibility 设置为 hidden - 但到目前为止还没有解决问题。

正如我所说，我担心我只是遇到了技术本身的限制。任何想法可能是什么问题，以及我是否可以解决它？

编辑：这个特定动画的完整源代码可以在这两个 Gists 中找到。由于 CSS 文件的大小，我选择了 Gists。

• HTML：https://gist.githubusercontent.com/ChrGriffin/2f1f221143e24d3e39cad8e7369bc167/raw/16ea77d21aa79cf9da52fc3477a6773af41130f2/image.html
• CSS：https://gist.githubusercontent.com/ChrGriffin/7dcff0f119532ff37f68c01a8a22ecb5/raw/3e49d3dd0b7fa93aef6708750770d2616c53f682/image.css

Answer 1

正确答案

最终，这一切都归功于animation-timing-function。 steps() 函数中的第一个参数不是关键帧的数量（或循环中的步数），而是关键帧之间渲染的步数。

因此将其更改为 steps(1,end) 可以修复它，因为浏览器不再需要计算中间帧（由于大量 box-shadow 值，它显然会失败 - 每个像素基本上都有一个值 - 邪恶的技术，顺便说一句）。

看到它的工作：https://jsfiddle.net/websiter/wnrxmapu/2/

---

上一个答案：（部分不正确，导致上面的正确答案 - 我留下了它，因为它可能有助于其他人调试类似动画）：

一开始我以为你的导出工具……完全是错误的。

为什么？因为将animation-duration 从1s 增加到100s 会产生this result。

明显的结论是你的中间框架被窃听了。

但是，我单独测试了它们中的每一个，令我惊讶的是，它们正确呈现。

由此得出的结论是每个关键帧的box-shadow 计算次数是有限的，并且执行了某种聚类算法。

这是有道理的，因为我们在这里谈论的是box-shadow，在 99.999999999% 的情况下（基本上所有除了你的情况）不 strong> 必须准确。 应该（显然是）近似于有利于渲染速度，原因很明显：我们正在谈论用户体验和“感觉”。大多数用户都不是技术人员，他们只是希望在任何情况下都能平滑滚动。

我得出的结论是，在尽我最大努力优化您的代码并将其减少到初始大小的一半以下之后，每个关键帧允许的计算量必须有一个限制：https://jsfiddle.net/websiter/wnrxmapu/1/

我无法为box-shadow 找到任何有关像素聚类技术的资料，而且我认为网上没有多少资料 - 这应该是机密信息。

但是，恕我直言，除了吹牛的权利，我认为与 gif 或 svg 相比，您的技术在渲染性能方面没有任何机会。强调“恕我直言”。如果您坚持要完成此操作，您可能需要将图像切片并检查允许计算的限制是每个元素还是每个页面。

但我不会抱太大希望。正是您的代码所揭示的优化使 CSS 闪电般快速。如果它必须是准确的，它就不会那么快了。