I'm currently working on developing a text content slideshow using only CSS.
Here is the HTML/CSS code I have:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS text slideshow example</title>
<style>
#slideshow {
position: relative;
width: 500px;
height: 300px;
}
.item {
position: absolute;
max-width: 500px;
opacity: 0;
}
/* Animation for each item */
.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;
}
/* Additional items... */
@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>
</body>
</html>
Despite applying the correct styles to each item using the nth-child selector, the slideshow doesn't start as expected and all items remain with an opacity of 0.
How can I automatically trigger the start of the slideshow?
Note: The slideshow seems to work in Firefox but not in Chrome or Safari.