Question

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

我为图像设置了百分比，所以我甚至不确定渐变的来源。

有谁知道我该怎么做？

＆＃13;

#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;}
}

＆＃13;

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

＆＃13;

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;}
}

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

1 个答案:

HTML

CSS