css - 仅从 CSS 开始非循环 GIF

Question

我想知道是否可以使用 CSS 动画从头开始非循环 GIF？对于我的示例，我有两个 GIF。第一个每秒计数 1、2、3 - 第二个 GIF 每秒计数 4、5、6。

我的目标是显示第一个 GIF 直到它数到 3，然后切换到第二个 GIF 直到它数到 6，然后停止。我的问题是，如果我要显示第二个 GIF，它将始终显示为 6。

我的设置如下:

<div id="gif-two" class="gif"></div>
<div id="gif-one" class="gif"></div>

CSS

.gif {
  width: 300px;
  height: 300px;
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -150px;
}

#gif-one {
  background: url("http://i.imgur.com/jLTVHdY.gif");
}

#gif-two {
  background: url("http://i.imgur.com/O61k5Nf.gif");
}

我现在不知道如何处理这个问题。我试过切换 visibility - 但不知道如何在 CSS 中实现它。

Answer 1

Note: It is possible to achieve what you want by using CSS animations (as you will see from this answer) but I'd recommend you to combine them into the same GIF and use it that way because the approach used in this answer is too complex (so much so that I may struggle to explain it).

当 GIF 作为background-image 添加时，浏览器几乎同时加载两个图像，GIF 动画立即开始执行。这意味着第二个 GIF 上 4-5 的变化与第一个 GIF 上的 1-2 几乎同时发生。因此，当第一个 GIF 的循环结束时，第二个 GIF 的循环也将结束，这就是为什么您总是只能看到 6 个。

避免这种情况发生的唯一方法是让浏览器在第一个循环完成后加载图像。下面的代码片段以非常复杂的方式实现了这一点。方法如下:

• 最初，背景图片仅添加到第一个 div(因为它需要立即开始自己的循环)。
• 持续时间为 3 秒的动画设置为第一个 div。此动画将在大约 3 秒后隐藏第一个 div(及其背景图像)，这是其循环完成所需的时间。 opacity 从 1 到 0 的变化从 95% 本身开始，以创建淡出效果。否则，在循环结束时，它看起来好像会闪烁，而第二个 GIF 会闪烁(这看起来并不令人愉快)。
• 第二个 div 在开始时没有添加任何背景图像，因为如果添加了它，它将立即加载并开始循环。还添加了一个持续时间为 3 秒的动画。
• 第二个 div 上的动画仅在动画结束时才添加背景图像 (100%)。这意味着第二张图片仅在 3 秒(持续时间)后加载，并且它仅从该时间开始循环(到此，第一个循环已经完成)。

.gif {
  width: 300px;
  height: 300px;
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -150px;
}

#gif-one {
  animation: img 3s linear forwards;
  background: url(http://i.imgur.com/jLTVHdY.gif?3);
}

#gif-two {
  animation: img2 3s linear forwards;
  z-index: -1;
}

@keyframes img {
  0%, 95% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes img2 {
  0%, 99% {
    background-image: none;
  }
  100%{
    background: url(http://i.imgur.com/O61k5Nf.gif?3);    
  }  
}

<div id="gif-one" class="gif"></div>
<div id="gif-two" class="gif"></div>

---

注意:因为我在写 this answer ，我意识到在 @keyframes 规则中设置 background-image 在 IE 和 Firefox 中不起作用。因此，上述解决方案仅适用于 WebKit。此外，据我所知，没有其他可能的纯 CSS 解决方案。您将不得不使用 JavaScript，这将有助于 CBroe 也提到的缓存破坏。下面是一个使用 JS 的示例演示。

使用单元素+JS:

window.onload = function() {
  var el = document.querySelector('.gif');
  el.style.backgroundImage = 'url(http://i.imgur.com/jLTVHdY.gif' + Math.random() + ')';
  setTimeout(function() {
    el.style.backgroundImage = 'url(http://i.imgur.com/O61k5Nf.gif' + Math.random() + ')';
  }, 3250);
}

.gif {
  width: 300px;
  height: 300px;
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -150px;
}

<div class="gif"></div>

使用两个元素+JS:

window.onload = function() {
  var el1 = document.querySelector('#gif-one'),
      el2 = document.querySelector('#gif-two');
  el1.style.backgroundImage = 'url(http://i.imgur.com/jLTVHdY.gif' + Math.random() + ')';
  setTimeout(function() {
    el1.style.opacity = '0';
    el2.style.backgroundImage = 'url(http://i.imgur.com/O61k5Nf.gif' + Math.random() + ')';
  }, 3250);
}

.gif {
  width: 300px;
  height: 300px;
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -150px;
  transition: opacity .05s .5s;
}

<div id="gif-one" class="gif"></div>
<div id="gif-two" class="gif"></div>