html - 纯全屏 CSS 幻灯片，对背景幻灯片元素上的置换元素具有双重淡入/淡出效果

Question

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

Answer 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