Ich animiere einen spitz zulaufenden Farbverlauf, aber der Farbwechsel ist nicht sanft genug Ich habe mir verschiedene Artikel angesehen, kann sie aber nicht richtig wiedergeben Meinen Code finden Sie hier:
So lassen sich die Änderungen reibungsloser gestalten
背景图像在您想要的方式中无法平滑地进行动画处理。
然而,您可以平滑地动画化不透明度,因此一种获得效果的方法是将两个背景图像放在彼此上方,并改变它们的不透明度,使它们逐渐从一个变为另一个。
在您的情况下,您可以将背景图像放在伪元素的before和after上,而不是放在元素本身上。
它们具有相同的动画效果,但一个从中间开始(当不透明度为1时)。
当总持续时间只有1秒时,很难意识到这种混合效果,因此此代码片段增加了持续时间,以便您可以看到效果。
当然,您可以根据需要更改时序。
更改还是线性的,以便覆盖始终提供“整体”图像而不是半透明图像。