纯全屏 CSS 幻灯片，具有双淡入/淡出效果，用于背景幻灯片元素上的移位元素

【问题标题】：Pure Fullscreen CSS Slideshow with double fade in/out effect for displaced elements on background slide elements纯全屏 CSS 幻灯片，具有双淡入/淡出效果，用于背景幻灯片元素上的移位元素
【发布时间】：2014-04-17 08:13:46
【问题描述】：

我试图让这个幻灯片放映jsfiddle 带有封面背景图片幻灯片和移位的文本，在没有自动循环动画的情况下工作，只能通过按钮。幻灯片的所有元素都应用了单独的淡入/淡出，因此背景显示在文本之前。尝试单击按钮，一切正常，但我无法删除自动循环。可能我必须更改过渡动画，并删除所有元素上的-webkit-animation: titleAnimation 24s linear infinite 0s;，我不知道。我试过但没有成功。

【问题讨论】：

标签： html css slideshow css-transitions

【解决方案1】：

我已经解决了我的问题，我把解决方案放在这里，对于寻求类似东西的人来说可能会很有趣。我在网上找不到类似的东西。

我已经更新了这样的动画：

   /* Animation for the slideshow images */
@-webkit-keyframes imageAnimation { 
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}

/* Animation for the title */
@-webkit-keyframes titleAnimation { 
    from {
        opacity:0;
    }
    to {
        opacity:1;
     -webkit-animation-fill-mode:forwards; }
}

并为元素添加动画填充模式以强制它们停留在最后一个动画帧（仍然可见，不透明度：1）

-webkit-animation-fill-mode:forwards;

这里是DEMO

【讨论】：