CSS3 save position after animation - css

Question

i have a banner that move when i pass the mouse over it, and when the mouse exit, the banner go back to it's original position, i want to know how to make it stop at it's current position after animation (i don't want to reset each time )
this is how it moves :
/*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

There are a couple of things to think about:
You will likely need to hover another element like a containing div, its hard to continue to hover over an element when it goes off screen.
Add an animation fill mode, this will persist the end state of the animation for as long as the user continues to hover.
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;
}
}
If you need the animation end state to persist after the user isn't hovering anymore you may want to consider using a little script to add the animation by adding a class, like so:
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;
}
If you should need to have the animation pause when the user is no longer hovering and resume when hovered again:
Working Example 3
$('.first').hover(function () {
$('.first').addClass('banner');
$('.banner').css('animationPlayState', 'running');
},
function () {
$('.banner').css('animationPlayState', 'paused');
});

Answer 2

.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
}
by placing infinite you set the iteration count to constantly play back repetitively. Taking out infinite will solve your issue.