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

Есть несколько вещей, чтобы думать:

• Вы, вероятно, нужно парить еще один элемент, как содержащий DIV, его трудно продолжать парить над элементом, когда он выходит за пределы экрана.
• Добавить 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'); 
});