Css 如何使关键帧图像的过渡看起来平滑

我有一系列的关键帧，显示七个不同的图像。这些图像以一种看起来不自然的方式出现。您可以在屏幕上看到新图像闪烁。我希望这个动画以一种方式出现，它看起来像是一个图像，只是在做细微的改变

我正在附加关键帧序列

这与我的关键帧百分比是如何构成的或什么有关吗

@-webkit关键帧思考{
0%，30%{背景图像：url（“/images/think.png”）；}
32%，41%{背景图像：url（“/images/think22.png”）；}
42%，55%{背景图像：url（“/images/think3.png”）；}
56%，69%{背景图像：url（“/images/think4.png”）；}
70%，83%{背景图像：url（“/images/think5.png”）；}
84%，99%{背景图像：url（“/images/think6.png”）；}
100%{背景图像：url（“/images/think7.png”）；}
}

---

您正在寻找图像的交叉褪色或图像从一种状态到另一种状态的平滑过渡。这不是不可能的，但也不是简单的。您可以执行类似于中的操作，但正如您在那里看到的，这是通过将多个图像放置在彼此的顶部来完成的，并且它们的不透明度是动画的，而不是背景图像本身

最好的办法是使用尽可能接近前一帧的帧，并在动画开始之前预加载图像。这些可以帮助最小化闪烁。本文讨论了几种可用于预加载图像的方法。或者，您也可以查看SVG来创建图像，然后为其设置动画。设置SVG动画要比设置图像动画容易得多

至于问题的另一部分（即42%到100%的帧是否可以单独重复而不重复前42%），可以通过使用两个单独的动画来完成，一个用于第一部分，另一个用于第二部分。第一个动画应该只有一次迭代，而第二个动画必须有无限次的迭代计数

#蓝色{
宽度：100%；
高度：800px；
背景：蓝色；
}
.想{
左边距：200px；
宽度：自动；
高度：500px；
-webkit动画名称：think，think2；
动画名称：think，think2；
-webkit动画持续时间：3.28秒，4.72秒；
动画持续时间：3.28s，4.72s；
-webkit动画迭代次数：1，无限；
动画迭代次数：1，无限；
-webkit动画延迟：0s，3.28s；/*延迟秒，以便在第一次完成后开始*/
动画延迟：0s，3.28s；/*延迟秒，以便在第一次完成后开始*/
-webkit动画方向：正常；
动画方向：正常；
-webkit动画填充模式：正向；
动画填充模式：正向；
/*最小高度：500px；最小宽度：500px*/
背景重复：无重复；
/*背景尺寸：100%自动*/
}
/*铬、狩猎、歌剧*/
@-webkit关键帧思考{
0%,
74.99% {
背景图像：url（“http://optimumwebdesigns.com/images/think.png");
}
75%,
100% {
背景图像：url（“http://optimumwebdesigns.com/images/think22.png");
}
}
@-webkit关键帧think2{
0%,
19.99% {
背景图像：url（“http://optimumwebdesigns.com/images/think3.png");
}
20%,
39.99% {
背景图像：url（“http://optimumwebdesigns.com/images/think4.png");
}
40%,
59.99% {
背景图像：url（“http://optimumwebdesigns.com/images/think5.png");
}
60%,
79.99% {
背景图像：url（“http://optimumwebdesigns.com/images/think6.png");
}
80%, 100% {
背景图像：url（“http://optimumwebdesigns.com/images/think7.png");
}
}
/*标准语法*/
@关键帧思考{
0%,
74.99% {
背景图像：url（“http://optimumwebdesigns.com/images/think.png");
}
75%,
100% {
背景图像：url（“http://optimumwebdesigns.com/images/think22.png");
}
}
@关键帧think2{
0%,
19.99% {
背景图像：url（“http://optimumwebdesigns.com/images/think3.png");
}
20%,
39.99% {
背景图像：url（“http://optimumwebdesigns.com/images/think4.png");
}
40%,
59.99% {
背景图像：url（“http://optimumwebdesigns.com/images/think5.png");
}
60%,
79.99% {
背景图像：url（“http://optimumwebdesigns.com/images/think6.png");
}
80%, 100% {
背景图像：url（“http://optimumwebdesigns.com/images/think7.png");
}
}

你还看到闪光灯吗？最好不要在关键帧之间留下间隙，因为图像不会平稳过渡或更改（至少不会跨浏览器）。@Harry是的，我仍然看到闪光灯。似乎一旦它播放了不止一次，它就不会播放flash，但我确信这与缓存有关。“在第一次加载时，它就这样做了。”哈利，我当时能做些什么？那个链接真是太神奇了！我没有illustrator，否则我会尝试这样做。谢谢你的帮助，请随意回答这个问题。我会接受的。有没有办法在不循环整个关键帧集的情况下，只无限地重放42%-100%的关键帧？非常感谢！关于交叉兼容性，你是对的，Firefox和IE甚至不会显示图像，但我相信我有另一种方法。这些都能帮上大忙。谢谢