我正在使用以下代码在我的网页上生成动画。它在 safari、firefox 和 chrome 中运行良好，但在歌剧中不起作用。还有一件事，在@keyframes 规则的w3c 参考中，为opera 提供的语法是“@-o-keyframes”，但它适用于“@keyframes”。我面临的问题是动画只能工作一次。之后，它开始表现得很奇怪。
这是标记。
<div id="content-slider">
<div id="slider"> <!-- Slider container -->
<div id="mask"> <!-- Mask -->
<ul>
<li id="first" class="firstanimation"> <!-- ID for tooltip and class for animation -->
<a href="#"> <img src="HP-7.jpeg" alt="Cougar"/> </a>
<div class="tooltip"> <h1>Harry Potter 7</h1> </div>
</li>
<li id="second" class="secondanimation">
<a href="#"> <img src="SH-2.jpg" alt="Lions" /> </a>
<div class="tooltip"> <h1>Sherlock Holmes 2</h1> </div>
</li>
<li id="third" class="thirdanimation">
<a href="#"> <img src="rango.jpg" alt="Snowalker"/> </a>
<div class="tooltip"> <h1>Rango</h1> </div>
</li>
<li id="fourth" class="fourthanimation">
<a href="#"> <img src="DM.png" alt="Howling"/> </a>
<div class="tooltip"> <h1>Despicable Me 2</h1> </div>
</li>
<li id="fifth" class="fifthanimation">
<a href="#"> <img src="Mad-3.jpeg" alt="Sunbathing"/> </a>
<div class="tooltip"> <h1>Madagascar 3</h1> </div>
</li>
</ul>
</div> <!-- End Mask -->
<div class="progress-bar">
</div> <!-- Progress Bar -->
</div> <!-- End Slider Container -->
</div>
的CSS。
#slider {
float: right;
background: #000000;
border: 3px solid #8B7355;
box-shadow: 1px 1px 5px rgba(0,0,0,0.7);
height: 255px;
margin: 18px 2%;
width: 75%;
overflow: visible;
position: relative;
}
/* HIDE ALL OUTSIDE OF THE SLIDER */
#mask {
overflow: hidden;
height: 255px;
}
/* IMAGE LIST */
#slider ul {
margin: 0;
padding: 0;
position: relative;
}
#slider li {
width: 75%; /* Width Image */
height: 253px; /* Height Image */
position: absolute;
top: -250px; /* Original Position - Inside of the Slider */
list-style: none;
}
#slider img {
width:820px;
height: 255px;
}
#slider li.firstanimation {
animation: cycle 25s linear infinite;
-o-animation: cycle 25s linear infinite;
}
#slider li.secondanimation {
animation: cycletwo 25s linear infinite;
-o-animation: cycletwo 25s linear infinite;
}
#slider li.thirdanimation {
animation: cyclethree 25s linear infinite;
-o-animation: cyclethree 25s linear infinite;
}
#slider li.fourthanimation {
animation: cyclefour 25s linear infinite;
-o-animation: cyclefour 25s linear infinite;
}
#slider li.fifthanimation {
animation: cyclefive 25s linear infinite;
-o-animation: cyclefive 25s linear infinite;
}
@keyframes cycle {
0% { top: 0px; } /* When you start the slide, the first image is already visible */
4% { top: 0px; } /* Original Position */
16% { top: 0px; opacity:1; z-index:0; } /* From 4% to 16 % = for 3 seconds the image is visible */
20% { top: 250px; opacity: 0; z-index: 0; } /* From 16% to 20% = for 1 second exit image */
21% { top: -250px; opacity: 0; z-index: -1; } /* Return to Original Position */
92% { top: -250px; opacity: 0; z-index: 0; }
96% { top: -250px; opacity: 0; } /* From 96% to 100% = for 1 second enter image*/
100%{ top: 0px; opacity: 1; }
}
@keyframes cycletwo {
0% { top: -250px; opacity: 0; } /* Original Position */
16% { top: -250px; opacity: 0; }/* Starts moving after 16% to this position */
20% { top: 0px; opacity: 1; }
24% { top: 0px; opacity: 1; } /* From 20% to 24% = for 1 second enter image*/
36% { top: 0px; opacity: 1; z-index: 0; } /* From 24% to 36 % = for 3 seconds the image is visible */
40% { top: 250px; opacity: 0; z-index: 0; } /* From 36% to 40% = for 1 second exit image */
41% { top: -250px; opacity: 0; z-index: -1; } /* Return to Original Position */
100%{ top: -250px; opacity: 0; z-index: -1; }
}
@keyframes cyclethree {
0% { top: -250px; opacity: 0; }
36% { top: -250px; opacity: 0; }
40% { top: 0px; opacity: 1; }
44% { top: 0px; opacity: 1; }
56% { top: 0px; opacity: 1; }
60% { top: 250px; opacity: 0; z-index: 0; }
61% { top: -250px; opacity: 0; z-index: -1; }
100%{ top: -250px; opacity: 0; z-index: -1; }
}
@keyframes cyclefour {
0% { top: -250px; opacity: 0; }
56% { top: -250px; opacity: 0; }
60% { top: 0px; opacity: 1; }
64% { top: 0px; opacity: 1; }
76% { top: 0px; opacity: 1; z-index: 0; }
80% { top: 250px; opacity: 0; z-index: 0; }
81% { top: -250px; opacity: 0; z-index: -1; }
100%{ top: -250px; opacity: 0; z-index: -1; }
}
@keyframes cyclefive {
0% { top: -250px; opacity: 0; }
76% { top: -250px; opacity: 0; }
80% { top: 0px; opacity: 1; }
84% { top: 0px; opacity: 1; }
96% { top: 0px; opacity: 1; z-index: 0; }
100%{ top: 250px; opacity: 0; z-index: 0; }
}