CODEWITHSUNDEEP
css
alaslipknot
alaslipknot

Reputation: 39

CSS3 save position after animation

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;
 }

}

Upvotes: 0

Views: 3761

Answers (2)

apaul
apaul

Reputation: 16170

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');
});

Upvotes: 2

EasyBB
EasyBB

Reputation: 6554

  .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.

Upvotes: -1

Related Questions