部分用于测试,部分用于我的设计理念,我试图将动画gif转换为纯动画CSS.

它几乎正常工作,但我遇到了障碍,我不确定是什么导致了我的问题,或者我如何解决它.我不幸地怀疑我只是限制了技术.

至于实际的CSS,我一直在尝试实现这里的方法(动画框阴影属性),因为它看起来最可行：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设置为隐藏 – 但到目前为止还没有解决问题.

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

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