css - CSS关键帧动画中的图像重复

Question

所以在我的动画中，我目前遇到了一个问题，即我的第一张图片 rt1 在我的最后一张图片 rt3 旋转进入 View 之前略微透明地闪烁到 View 中，然后在 rt3 进入 View 之后再次这样做看法。为什么会这样，我该怎么做才能阻止这种情况发生？我相信我为我的动画序列正确地堆叠了我的图像。

我还要注意，这只发生在 safari 中。当我尝试在 chrome 中运行它时，它呈现得很好。

/* ---------------------------------------------------
Banner
--------------------------------------------------- */
#banner a#main {
background-image:
  url('../images/Animation-rotations/Beer/320x50/320x50_2x_rt1.png'),
  url('../images/Animation-rotations/Beer/320x50/320x50_2x_rt2.png'),
  url('../images/Animation-rotations/Beer/320x50/320x50_2x_rt3.png');
background-size: contain;
color: #E1E0DC;
}

#banner a#main .content {
-webkit-animation: bannerRotation 12s cubic-bezier(1, 0, 0.7, 0) forwards;
background-image:
  url('../images/Animation-rotations/Beer/320x50/320x50_2x_rt1.png'),
  url('../images/Animation-rotations/Beer/320x50/320x50_2x_rt2.png'),
  url('../images/Animation-rotations/Beer/320x50/320x50_2x_rt3.png');
background-size: contain;
}


@-webkit-keyframes bannerRotation {
  0%  {
    background-image:
      url('../images/Animation-rotations/Beer/320x50/320x50_2x_rt1.png');
  } 33.3%, 66.6%  {
    background-image:
      url('../images/Animation-rotations/Beer/320x50/320x50_2x_rt2.png');
  }  66.6%, 100% {
    background-image:
      url('../images/Animation-rotations/Beer/320x50/320x50_2x_rt3.png');
  } 
}

Answer 1

使用background-repeat: no-repeat;