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

注意：使用CSS动画可以实现您想要的效果（正如您将从此答案中看到的那样），但我建议您将它们组合到同一个GIF中并使用这样，因为这个答案中使用的方法过于复杂（以至于我可能很难解释它）。

当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秒（持续时间）之后加载，并且仅从该时间开始其循环（通过该循环，第一个图像的循环已经完成）。

＆＃13;

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

＆＃13;

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

＆＃13;

注意：在撰写this answer时，我意识到在background-image规则中设置@keyframes在IE和Firefox中不起作用。因此，上述解决方案仅限于WebKit 。另外，据我所知，没有其他纯CSS解决方案可行。你必须使用JavaScript，这将有助于破坏CBroe所指的缓存。以下是使用JS的示例演示。

使用单个元素+ JS：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

使用两个元素+ JS：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

仅从CSS开始启动非循环GIF

1 个答案: