html - 如何让 css 动画在关键帧中更快地过渡

Question

我创建了一个使用三个不同图像的 css 动画，然后在最后我让它返回到第一个图像。我的问题是每当图像转换时，它看起来都不自然。看起来好像旧图像淡出，新图像同时淡入。我希望收紧过渡，以便仍然有一点淡入淡出，但更快更自然。

我为图像设置了百分比，所以我什至不确定淡入淡出的来源。

有人知道我该怎么做吗？

#contact-success-animation {
	width: 100px;
	height: 100px;
	position: relative;
	margin: auto auto;
	-webkit-animation-name: success-animation; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 15s; /* Chrome, Safari, Opera */
    -webkit-animation-iteration-count: 1; /* Chrome, Safari, Opera */
    -webkit-animation-direction: normal; /* Chrome, Safari, Opera */
	-webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
	animation-name: success-animation;
    animation-duration: 15s;
    animation-iteration-count: 1;
    animation-direction: normal;
	animation-fill-mode: forwards;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes success-animation {
    0%   {background-image: url("http://optimumwebdesigns.com/images/smiley-face.png"); background-repeat: no-repeat;
background-size: 100% auto; height: 100px; width: 100px;}
    33%  {background-image: url("http://optimumwebdesigns.com/images/big-smile-face.png"); background-repeat: no-repeat;
background-size: 100% auto; height: 100px; width: 100px;}
    66%  {background-image: url("http://optimumwebdesigns.com/images/wink-smile-face.png"); background-repeat: no-repeat;
background-size: 100% auto; height: 100px; width: 100px;}
    100% {background-image: url("http://optimumwebdesigns.com/images/smiley-face.png"); background-repeat: no-repeat;
background-size: 100% auto; height: 100px; width: 100px;}
}

/* Standard syntax */
@keyframes success-animation {
    0%   {background-image: url("http://optimumwebdesigns.com/images/smiley-face.png"); background-repeat: no-repeat;
background-size: 100% auto; height: 100px; width: 100px;}
    33%  {background-image: url("http://optimumwebdesigns.com/images/big-smile-face.png"); background-repeat: no-repeat;
background-size: 100% auto; height: 100px; width: 100px;}
    66%  {background-image: url("http://optimumwebdesigns.com/images/wink-smile-face.png"); background-repeat: no-repeat;
background-size: 100% auto; height: 100px; width: 100px;}
    100% {background-image: url("http://optimumwebdesigns.com/images/smiley-face.png"); background-repeat: no-repeat;
background-size: 100% auto; height: 100px; width: 100px;}
}

<div id="contact-success-animation"></div>

Answer 1

使用 @keyframes，您可以通过编写 33%,65% 而不是 33% 来指定时间“区域”。这允许您屏蔽一个图像将出现在屏幕上的时间段，然后它会在一段时间后快速过渡到另一个图像，这将实现您正在寻找的内容。

这是一个示例，使用背景颜色代替图像 (jsFiddle):

HTML

<div class="Snappy">
  This is a snappy transition.
</div>
<div class="Smooth">
  This is a smooth transition.
</div>

CSS

.Smooth
{
  animation: smoothColors 10s infinite;
}

.Snappy
{
  animation: snappyColors 10s infinite;
}

/* Keyframes */

@keyframes smoothColors{
  0%{background: #ff0000;}
  33%{background: #00ff00;}
  66%{background: #0000ff;}
  100%{background: #ff0000;}
}

@keyframes snappyColors{
  0%,23%{background: #ff0000;}
  33%,56%{background: #00ff00;}
  66%, 90%{background: #0000ff;}
  100%{background: #ff0000;}
}