如何使用HTML和CSS制作简单的计时器图片幻灯片

Question

我正在尝试制作一个简单的定时器幻灯片，其中一张图像只在一定时间内可见（5秒），然后幻灯片切换到另一张图像 - 这将无限循环。

我已经搜索了解决方案，但似乎没有得到正确的结果。任何帮助都将是惊人的，先感谢您。

到目前为止，我尝试过以下方法 - 两个图像淡入，但它们不重叠。其中一个在另一个上面，淡入动画有效，但它们同时淡出，而不是一个渐变并转换到下一个图像。

@keyframes cf3FadeInOut {
    0% { opacity:1; }
   45% { opacity:1; }
   55% { opacity:0; }
  100% { opacity:0; }
}

#cf {
  animation-name            : cf3FadeInOut;
  animation-timing-function : ease-in-out;
  animation-iteration-count : infinite;
  animation-duration        : 10s;
  animation-direction       : alternate;
}

<div id="cf">
  <img class="bottom" src="12289696_1526730367649084_3157113004361281453_n.jpg" />
  <img class="top" src="11406788_1433347623654026_6824927253890240539_n.jpg" />
</div>

- That guy

---

请看一下 CSS 动画。 - G-Cyrillus

请提供您已尝试过的示例。 - KrisD

KrisD，我编辑了我的问题并放置了我尝试工作的代码。 - That guy

Answer 1

有两张图片时，你可以通过CSS动画以低成本实现一些效果：

@keyframes cf {
  50% {/* at 50%, it avoids alternate mode */
    opacity: 0;
  }
}

#cf {/* same size as image */
  height: 300px;
  width: 200px;
  margin:auto;
}

#cf img {
  position: absolute;/* lets stack them */
}

#cf .top {
  animation: cf 10s infinite; /* let it run for ever */
}

<div id="cf">
  <img class="bottom" src="http://lorempixel.com/200/300/people/3" />
  <img class="top" src="http://lorempixel.com/200/300/people/4" />
</div>

- G-Cyrillus

---

仅为澄清，我必须使用http来源的图像吗？我正在创建自己的网站，但是使用本地图像作为img src并不起作用。 - That guy

@JaoJao，容器#cf在流中，margin:auto将水平居中；否则，flex也可以以较低的成本在X、Y轴上居中此框：示例http://codepen.io/anon/pen/OMxgOW - G-Cyrillus

我在使用火狐浏览器。我不确定这是否有问题，因为它没有自动对齐到页面;-; 仍然在最右边。(使用相同的图像尺寸) - That guy

@JaoJao 我添加了白色边框，看起来居中了（同时修复了居中和字体标签）。https://jsfiddle.net/cb7cy2hp/2/ - G-Cyrillus

我找到了一种上传我所得到的屏幕截图的方法，说实话，我甚至不确定它为什么会这样。http://tinypic.com/view.php?pic=24llvd3&s=9#.VplyTlnL_1U - That guy

Answer 2

对于HTML和CSS（不包括javascript），可以使用CSS3属性进行动画处理。 例如，对于3张幻灯片： HTML和CSS - 首先声明img以进行加载（以实现平滑动画效果）。

    body{
      background:no-repeat;
      -webkit-animation:animation 10s infinite;
      -moz-animation:animation 10s infinite;
      animation:animation 10s infinite;   
      -webkit-animation-timing-function:linear;
      -moz-animation-timing-function:linear;
      animation-timing-function:linear;
    }
    .for_load{
      width:1px;
      height:1px;
      position:absolute;
      left:-1px;
      top:-1Px;
    }
    @-moz-keyframes animation{
      0%{
        background-image:url(http://lorempixel.com/400/200/);
      }
      30%{
        background-image:url(http://lorempixel.com/400/200/);
      }
      33%{
        background-image:url(http://lorempixel.com/400/201/);
      }
      63%{
        background-image:url(http://lorempixel.com/400/201/);
      }
      66%{
        background-image:url(http://lorempixel.com/400/202/);
      }
      97%{
        background-image:url(http://lorempixel.com/400/202/);
      }
      100%{
        background-image:url(http://lorempixel.com/400/200/);
      }
    }
    @-webkit-keyframes animation{
      0%{
        background-image:url(http://lorempixel.com/400/200/);
      }
      30%{
        background-image:url(http://lorempixel.com/400/200/);
      }
      33%{
        background-image:url(http://lorempixel.com/400/201/);
      }
      63%{
        background-image:url(http://lorempixel.com/400/201/);
      }
      66%{
        background-image:url(http://lorempixel.com/400/202/);
      }
      97%{
        background-image:url(http://lorempixel.com/400/202/);
      }
      100%{
        background-image:url(http://lorempixel.com/400/200/);
      }
    }
    @keyframes animation{
      0%{
        background-image:url(http://lorempixel.com/400/200/);
      }
      30%{
        background-image:url(http://lorempixel.com/400/200/);
      }
      33%{
        background-image:url(http://lorempixel.com/400/201/);
      }
      63%{
        background-image:url(http://lorempixel.com/400/201/);
      }
      66%{
        background-image:url(http://lorempixel.com/400/202/);
      }
      97%{
        background-image:url(http://lorempixel.com/400/202/);
      }
      100%{
        background-image:url(http://lorempixel.com/400/200/);
      }
    }

<img class="for_load" src="http://lorempixel.com/400/200/">
    <img class="for_load" src="http://lorempixel.com/400/201/">
    <img class="for_load" src="http://lorempixel.com/400/202/">

https://jsfiddle.net/muLgodbf/

- maťo

---

background-image + animation在火狐浏览器中迄今为止从未起作用。你应该使用背景位置（当然是多个背景）；此外，如果这是内容，则应该放在HTML中而不是背景。OP没有说：）对于背景，它可以通过steps()运行精灵。 - G-Cyrillus

你介意我问一下三个关键帧声明之间的区别吗？我以为@keyframes是CSS3动画的通用规则。那么moz和web-kit关键帧是什么？ - That guy

@JaoJao 这些以前是旧版本需要的供应商前缀，现在不再需要了，你可以不用理会它们。 - G-Cyrillus