我正在研究纯 CSS 轮播，通过将图片和超链接溶解在蓝色背景上来更改 4 个 div。
它在 IE10/11、Opera 15、Mozila 23、Safari 5.1.7 (win)、Safari 中运行良好？（osx108）。在 Chrome 29 中运行时，除了一个问题外几乎没问题。如果它在 2 个以上的浏览器选项卡中打开，它会失去同步并几乎立即跳过图像。如果它在 2 个以上的浏览器窗口中打开，一切正常。
它在 iPad2 上的 Safari 中以同样的方式被破坏。
是浏览器问题还是代码问题？
HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Carousel v0</title>
<link href="carousel.css" rel="stylesheet" type="text/css">
</head>
<body>
<!-- Carousel Start -->
<div class="carousel-items">
<div id="carousel-item-1" class="carousel-item">
<a class="carousel-item-text" href="#" title="Go to Showcase Item 1">
<span class="carousel-item-title">Showcase Item 1 Title</span>
<span class="carousel-item-description">Brief description or introduction into Showcase Item 1.</span>
</a>
</div>
<div id="carousel-item-2" class="carousel-item">
<a class="carousel-item-text" href="#" title="Go to Showcase Item 2">
<span class="carousel-item-title">Showcase Item 2 Title</span>
<span class="carousel-item-description">Brief description or introduction into Showcase Item 2.</span>
</a>
</div>
<div id="carousel-item-3" class="carousel-item">
<a class="carousel-item-text" href="#" title="Go to Showcase Item 3">
<span class="carousel-item-title">Showcase Item 3 Title</span>
<span class="carousel-item-description">Brief description or introduction into Showcase Item 3.</span>
</a>
</div>
<div id="carousel-item-4" class="carousel-item">
<a class="carousel-item-text" href="#" title="Go to Showcase Item 4">
<span class="carousel-item-title">Showcase Item 4 Title</span>
<span class="carousel-item-description">Brief description or introduction into Showcase Item 4.</span>
</a>
</div>
</div>
<!-- Carousel Finish -->
</body>
</html>
CSS：
/* Container to position carousel composition */
.carousel-items {
overflow: hidden;
width: 923px;
height: 355px;
background: rgba(0,19,127,0.3);
}
/* Deafault position of carousel items */
.carousel-item {
position: absolute!important;
width: 923px;
height:355px;
opacity: 0;
-webkit-animation: colorDissolve 24s linear infinite;
-moz-animation: colorDissolve 24s linear infinite;
-ms-animation: colorDissolve 24s linear infinite;
animation: colorDissolve 24s linear infinite;
}
/* Backgrounds to carousel items */
#carousel-item-1{background-image:url('one.jpg');}
#carousel-item-2{background-image:url('two.jpg');}
#carousel-item-3{background-image:url('three.jpg');}
#carousel-item-4{background-image:url('four.jpg');}
/* Animation delay for carousel item 2 */
.carousel-item:nth-child(2) {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
/* Animation delay for carousel item 3 */
.carousel-item:nth-child(3) {
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
/* Animation delay for carousel item 4 */
.carousel-item:nth-child(4) {
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
/* Appearance of carousel item description - Initial style*/
.carousel-item-text {
position:relative;
display:block;
top:285px;
z-index: 1500;
width: 923px;
height: 70px;
overflow: hidden;
color:#ffffff;
text-decoration:none;
background: rgba(0,19,127,0.3);
-webkit-transition: all 750ms ease;
-moz-transition: all 750ms ease;
-o-transition: all 750ms ease;
-ms-transition: all 750ms ease;
transition: all 750ms ease;
}
/* Appearance of carousel item description - Item hover style */
.carousel-item:hover > .carousel-item-text {
top:205px;
height: 150px;
}
/* Title of carousel item */
.carousel-item-title {
position:relative;
padding-left:20px;
font-size:xx-large;
line-height:70px;
letter-spacing: 2px;
}
/* Description of carousel item */
.carousel-item-description {
position:relative;
display:block;
width:783px;
padding-left:20px;
line-height:130%;
font-size:x-large;
}
/* The keyframes calculations are based on assumption of 4 items in the carousel. */
@-webkit-keyframes colorDissolve {
0%, 27%, 100% { opacity: 0; }
2%, 25% { opacity: 1; z-index:1000;}
}
@-moz-keyframes colorDissolve {
0%, 27%, 100% { opacity: 0; }
2%, 25% { opacity: 1; z-index:1000;}
}
@-ms-keyframes colorDissolve {
0%, 27%, 100% { opacity: 0; }
2%, 25% { opacity: 1; z-index:1000;}
}
@keyframes colorDissolve {
0%, 27%, 100% { opacity: 0; }
2%, 25% { opacity: 1; z-index:1000;}
}