Html css动画在opera中不起作用
我使用以下代码在我的网页上生成动画。它在safari、firefox和chrome中运行良好,但在opera中不起作用。还有一件事,在for@keyframes规则中,opera的语法是“@-o-keyframes”,但它在“@keyframes”上起作用。 我面临的问题是,动画只工作一次。在那之后,它开始表现得很奇怪 这是标记Html css动画在opera中不起作用,html,css,css-animations,Html,Css,Css Animations,我使用以下代码在我的网页上生成动画。它在safari、firefox和chrome中运行良好,但在opera中不起作用。还有一件事,在for@keyframes规则中,opera的语法是“@-o-keyframes”,但它在“@keyframes”上起作用。 我面临的问题是,动画只工作一次。在那之后,它开始表现得很奇怪 这是标记 <div id="content-slider"> <div id="slider"> <!-- Slide
<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动画是非常新的且不完全可靠的事实。你应该时刻注意你的网页在没有动画的情况下会是什么样子,因为浏览器的支持还没有出现,而且可能在未来几年内也不会出现 jQuery动画受到更多浏览器的支持(在我看来,编程更容易)。然而,即使是这些动画也有其挫折
寻找新的东西很酷,但要确保你有一个坚实的“基础”,让浏览器可以依靠这些“老东西”。你的标题说它在FF中不起作用,你的文字说它在FF中起作用。。。现在怎么办?
#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; }
}