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％），可以通过使用两个单独的动画来完成 - 一个用于第一部分和另一个是第二个。第一个动画应该只有一个迭代，而第二个动画必须具有无限的迭代计数。

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

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

1 个答案: