6
에 애니메이션을 재설정합니다. 이것은 Chrome과 Safari에서 완벽하게 작동하지만 Firefox에서 슬라이더를 가리킬 때마다 일시 중지되기 전에 애니메이션이 실제로 빠르게 재생됩니다. 심지어 animation-play-state:paused 줄 없이도이 문제가 발생합니다.파이어 폭스는이 코드를 기반으로 키 프레임 애니메이션을 사용하여 함께 순수 CSS는 텍스트 슬라이드 쇼를 넣었습니다 호버
또한 슬라이더에 애니메이션을 재생하는 것으로 보이는 또 다른 호버 선택기가 있습니다. 그러나 슬라이더 내에 아무 유형의 호버 선택기 (애니메이션과 관련이 없다고하더라도)가있는 한 내가 제거하는 것은 중요하지 않습니다. Firefox는 이상한 일이 일어나게 만듭니다.
나는 여러 해 동안 봤지만 동일한 문제가있는 사람을 찾을 수 없습니다. 아무도이 문제를 해결하는 방법을 알고 있습니까? 나는 약간의 도움에 대해 대단히 감사 할 것입니다.
여기에 코드입니다 : 그들은 파이어 폭스에서 일시 정지 된 애니메이션을 무시하고 있기 때문에
<html>
<body>
<style>
#slider {
overflow: hidden;
position: relative;
width: 920px;
z-index: 0;
margin: 0 auto;
padding: 0;
}
#slider li {
float: left;
position: relative;
display: inline-block;
margin: 0px;
}
#slider-margin {
margin: 50px 0px;
padding: 0px;
border-radius: 8px;
border-bottom: 3px solid rgba(0,10,30,0.1);
position: relative;
background: rgba(0,10,30,0.2);
}
#slider li {
float: left;
position: relative;
display: inline-block;
margin: 0px;
}
#slider ul {
list-style: none;
position: relative;
left: 0px;
top: 0px;
width: 9000px;
transition: left .3s linear;
-moz-transition: left .3s linear;
-webkit-transition: left .3s linear;
margin: 0px;
padding: 0px;
overflow: hidden;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
#slider ul:hover {
animation-play-state: paused;
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
}
#slider-margin:hover {
background: rgba(0,10,30,0.3);
}
}
.slider-container {
margin: 0 auto;
padding: 10px 30px;
width: 860px;
}
#slider h1 {
font-size: 45px;
color: #fff;
text-shadow: rgba(0,10,30,0.7) 0px 1px 3px;
display: block;
}
#slider p {
line-height: 150%;
font-size: 20px;
color: #fff;
text-shadow: rgba(0,10,30,0.7) 0px 1px 3px;
display: block;
}
#slider ul {
animation: slide-animation 12.5s infinite;
-webkit-animation: slide-animation 12.5s infinite;
-moz-animation: slide-animation 12.5s infinite;
}
@keyframes slide-animation {
0% {left: 0px; opacity: 0;}
5% {opacity:1;}
40% {left:0px; opacity:1;}
45% {opacity: 0.5;}
50% {left:-920px; opacity:1;}
90% {left:-920px; opacity:1;}
97% {left:-920px; opacity:0;}
100% {left: 0px; opacity: 0;}
}
@-webkit-keyframes slide-animation {
0% {left: 0px; opacity: 0;}
5% {opacity:1;}
40% {left:0px; opacity:1;}
45% {opacity: 0.5;}
50% {left:-920px; opacity:1;}
90% {left:-920px; opacity:1;}
97% {left:-920px; opacity:0;}
100% {left: 0px; opacity: 0;}
}
@-moz-keyframes slide-animation {
0% {left: 0px; opacity: 0;}
5% {opacity:1;}
40% {left:0px; opacity:1;}
45% {opacity: 0.5;}
50% {left:-920px; opacity:1;}
90% {left:-920px; opacity:1;}
97% {left:-920px; opacity:0;}
100% {left: 0px; opacity: 0;}
}
</style>
<div id="slider">
<div id="slider-margin">
<ul>
<li>
<a href="#">
<div class="slider-container">
<h1>blablabla</h1>
<p>blablabla</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="slider-container">
<h1>blablabla</h1>
<p>blablabla.</p>
</div>
</a>
</li>
</ul>
</div>
</div>
</body>
</html>
내가 파이어 폭스 캐시를 삭제 한 후에 다시 시도해보십시오. – Jaiff