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

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

1 个答案: