CSS3保存動畫後的位置

Question

我有一個橫幅，當我將鼠標移到它上面時，當鼠標退出時，橫幅回到它的原始位置，我想知道如何使它停在它的當前位置動畫後（我不想每次都重新設置）

這是怎麼出招：

/*keyframe animations*/ 
.first:hover { 
    -webkit-animation: bannermove 30s linear infinite; 
     -moz-animation: bannermove 30s linear infinite; 
     -ms-animation: bannermove 30s linear infinite; 
     -o-animation: bannermove 30s linear infinite; 
      animation: bannermove 30s linear infinite; 
} 

@keyframes "bannermove" { 
0% { 
    margin-left: 0px; 
} 
100% { 
    margin-left: -2125px; 
} 

} 


@-webkit-keyframes "bannermove" { 
0% { 
    margin-left: 0px; 
} 
100% { 
    margin-left: -2125px; 
} 

} 

Answer 1

.first:hover { 
    -webkit-animation: bannermove 30s linear ; 
    -moz-animation: bannermove 30s linear ; 
    -ms-animation: bannermove 30s linear ; 
    -o-animation: bannermove 30s linear ; 
     animation: bannermove 30s linear 
    } 

放置無限您設置的迭代次數不斷回放反覆。取出無限將解決您的問題。

Answer 2

有一對夫婦的事情要考慮：

• 您可能需要徘徊另一個元素就像一個包含分區，它很難繼續當它熄滅屏幕元素懸停。
• 添加一個animation fill mode，只要用戶繼續懸停，這將持續動畫的結束狀態。

Working Example

<div class="container"> 
    <div class="first"></div> 
</div> 

.container:hover .first{ 
    -webkit-animation: bannermove 30s linear both; 
    -moz-animation: bannermove 30s linear both; 
    -ms-animation: bannermove 30s linear both; 
    -o-animation: bannermove 30s linear both; 
    animation: bannermove 30s linear both; 
} 

@keyframes bannermove { 
    0% { 
     margin-left: 0px; 
    } 
    100% { 
     margin-left: -2125px; 
    } 
} 

如果需要動畫結束狀態的用戶不會再徘徊後，堅持你可能要考慮使用一個小腳本添加動畫通過添加類，像這樣：

Working Example 2

$('.first').mouseenter(function(){ 
    $('.first').addClass('banner'); 
}); 

.banner{ 
    -webkit-animation: bannermove 30s linear both; 
    -moz-animation: bannermove 30s linear both; 
    -ms-animation: bannermove 30s linear both; 
    -o-animation: bannermove 30s linear both; 
    animation: bannermove 30s linear both; 
} 

如果您需要有動畫暫停時，用戶不再徘徊，恢復再次徘徊時：

Working Example 3

$('.first').hover(function() { 
    $('.first').addClass('banner'); 
    $('.banner').css('animationPlayState', 'running'); 
}, 

function() { 
    $('.banner').css('animationPlayState', 'paused'); 
});