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

Question

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

我正在附加关键帧序列。

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

@-webkit-keyframes think {
    0%, 30% {background-image: url("/images/think.png");}
    32%, 41% {background-image: url("/images/think22.png");}
    42%, 55% {background-image: url("/images/think3.png");}
    56%, 69% {background-image: url("/images/think4.png");}
    70%, 83% {background-image: url("/images/think5.png");}
    84%, 99% {background-image: url("/images/think6.png");}
    100% {background-image: url("/images/think7.png");}
}

JSFiddle

Answer 1

您正在寻找图像的交叉淡入淡出或图像从一种状态到另一种状态的平滑过渡。这不是不可能，但也不简单。您可以在this answer 中执行类似操作，但正如您在此处看到的那样，它是通过将多个图像相互叠加完成的，并且它们的不透明度是动画而不是背景图像本身。

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

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

#blue {
  width: 100%;
  height: 800px;
  background: blue;
}

.think {
  margin-left: 200px;
  width: auto;
  height: 500px;
  -webkit-animation-name: think, think2;
  animation-name: think, think2;
  -webkit-animation-duration: 3.28s, 4.72s;
  animation-duration: 3.28s, 4.72s;
  -webkit-animation-iteration-count: 1, infinite;
  animation-iteration-count: 1, infinite;
  -webkit-animation-delay: 0s, 3.28s; /* delay second so that it starts after 1st finishes */
  animation-delay: 0s, 3.28s; /* delay second so that it starts after 1st finishes */
  -webkit-animation-direction: normal;
  animation-direction: normal;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  /*min-height: 500px; min-width: 500px;*/
  background-repeat: no-repeat;
  /*background-size: 100% auto;*/
}


/* Chrome, Safari, Opera */

@-webkit-keyframes think {
  0%,
  74.99% {
    background-image: url("http://optimumwebdesigns.com/images/think.png");
  }
  75%,
  100% {
    background-image: url("http://optimumwebdesigns.com/images/think22.png");
  }
}

@-webkit-keyframes think2 {
  0%,
  19.99% {
    background-image: url("http://optimumwebdesigns.com/images/think3.png");
  }
  20%,
  39.99% {
    background-image: url("http://optimumwebdesigns.com/images/think4.png");
  }
  40%,
  59.99% {
    background-image: url("http://optimumwebdesigns.com/images/think5.png");
  }
  60%,
  79.99% {
    background-image: url("http://optimumwebdesigns.com/images/think6.png");
  }
  80%, 100% {
    background-image: url("http://optimumwebdesigns.com/images/think7.png");
  }
}


/* Standard syntax */

@keyframes think {
  0%,
  74.99% {
    background-image: url("http://optimumwebdesigns.com/images/think.png");
  }
  75%,
  100% {
    background-image: url("http://optimumwebdesigns.com/images/think22.png");
  }
}

@keyframes think2 {
  0%,
  19.99% {
    background-image: url("http://optimumwebdesigns.com/images/think3.png");
  }
  20%,
  39.99% {
    background-image: url("http://optimumwebdesigns.com/images/think4.png");
  }
  40%,
  59.99% {
    background-image: url("http://optimumwebdesigns.com/images/think5.png");
  }
  60%,
  79.99% {
    background-image: url("http://optimumwebdesigns.com/images/think6.png");
  }
  80%, 100% {
    background-image: url("http://optimumwebdesigns.com/images/think7.png");
  }
}

<div id="blue">
  <div class="think"></div>
</div>

当然，单个动画的持续时间应根据帧百分比和相关 sn-p 中使用的总动画持续时间来计算。第二个动画也应该延迟（与第一个动画的持续时间相同），以确保它不会干扰第一个动画并搞砸事情。

注意：如果我没记错的话，Chrome 可以将图像从一种状态平滑地转换到另一种状态，但它没有在其他浏览器中实现，因此依赖它可能不是一个好主意。