6

このコードに基づくキーフレーム アニメーションを使用して、純粋な CSS テキスト スライドショーを作成しました: https://codepen.io/johnlouie04/pen/BqyGb

トランジションにカーソルを合わせると一時停止するようにしました。これは Google Chrome と Safari では完全に機能しますが、Firefox では、スライダーをホバーするたびに、一時停止する前にアニメーションが非常に速く再生されます。これは、animation-play-state:paused行がなくても発生します。

スライダーには、アニメーションを再生させるように見える別のホバー セレクターもあります。しかし、どれを削除しても、スライダー内の任意のタイプのホバー セレクターがある限り (アニメーションとは関係なくても)、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>
4

1 に答える 1

2

Firefox で一時停止したアニメーションをオーバーライドしているため、transitionからを削除します。デモul

補足:最も標準的なプロパティを適用できるように、ブラウザーのプレフィックス付きプロパティをプレフィックスなしのバージョンの前に配置する必要があります。つまりこうなる

-webkit-animation: ...;
animation: ...;

それ以外の

animation: ...;
-webkit-animation: ..;

また、Firefoxは FF 15 以降、プレフィックスなしをサポートanimationしているため、CSS をクリーンアップしてサイズを小さくしたい場合は、プレフィックスを削除できます。

于 2014-11-27T00:09:53.290 に答える