Snažím sa vytvoriť slideshow iba pre CSS pre textový obsah.
Mám tento 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>
Problém je v tom, že sa prezentácia nikdy nespustí. Prepínač n-dieťa je správne aplikovaný na všetky items, ale zostávajú na opacity: 0.
Ako získam automatické spustenie prezentácie?
EDIT: Zdá sa, že to funguje vo Firefoxe, ale nie v prehliadači Chrome alebo Safari.
odpovede:
1 pre odpoveď č. 1pridať -webkit- predpona k keyframes tiež takto
@-webkit-keyframes {
/* rest other code goes here */
}