纯文本 CSS 幻灯片

Question

我正在尝试为文本内容创建 CSS 幻灯片。

我有这个HTML/CSS:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>CSS text slideshow</title>
        <style>
        #slideshow
        {
            position: relative;
            width: 500px;
            height: 300px;
        }
        .item
        {
            position: absolute;
            max-width: 500px;
            opacity: 0;
        }
        .item:nth-child(1)
        {
            -webkit-animation: crossfade 48s 30s infinite;
            animation: crossfade 48s 30s infinite;
        }
        .item:nth-child(2)
        {
            -webkit-animation: crossfade 48s 24s infinite;
            animation: crossfade 48s 24s infinite;
        }
        .item:nth-child(3)
        {
            -webkit-animation: crossfade 48s 18s infinite;
            animation: crossfade 48s 18s infinite;
        }
        .item:nth-child(4)
        {
            -webkit-animation: crossfade 48s 12s infinite;
            animation: crossfade 48s 12s infinite;
        }
        .item:nth-child(5)
        {
            -webkit-animation: crossfade 48s 6s infinite;
            animation: crossfade 48s 6s infinite;
        }
        .item:nth-child(6)
        {
            -webkit-animation: crossfade 48s 0s infinite;
            animation: crossfade 48s 0s infinite;
        }
        @keyframes crossfade
        {
            0%
            {
                opacity: 1;
            }
            10.5%
            {
                opacity: 1;
            }
            12.5%
            {
                opacity: 0;
            }
            98%
            {
                opacity: 0;
            }
            100%
            {
                opacity: 1;
            }
        }
        </style>
    </head>
    <body>
        <div id='slideshow'>
            <div class='item'>
                One
            </div>
            <div class='item'>
                Two
            </div>
            <div class='item'>
                Three
            </div>
            <div class='item'>
                Four
            </div>
            <div class='item'>
                Five
            </div>
            <div class='item'>
                Six
            </div>
        </div>
    </body>
</html>

问题是幻灯片从未开始播放。第 n 个子选择器已正确应用于所有 item，但它们仍处于 opacity: 0.

如何让幻灯片自动开始播放？

编辑：这似乎在 Firefox 中有效，但在 Chrome 或 Safari 中无效。

Answer 1

也给 keyframes 添加 -webkit- 前缀，像这样

@-webkit-keyframes {
 /* rest other code goes here */
}

纯文本 CSS 幻灯片

Text-only CSS slideshow

html

css

animation

slideshow

css-animations