它几乎快要成功了,但我遇到了一个问题,不确定是什么原因导致的,或者我该如何解决。我不幸地怀疑我只是碰到了技术的限制。
我用来测试的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
,但到目前为止没有任何解决办法。就像我所说的,我担心这只是技术本身的限制。有什么想法可能是问题所在,以及我是否可以解决它?编辑:这个特定动画的完整源代码可以在这两个Gist中找到。我选择使用Gist是因为CSS文件的大小。