how to revert css3 keyframe animation from current frame on mouse out?

Question

I want tot revert back to my first position from the current frame of animation. Here in this code I have written a simple css3 keyframe animation and its working on hover. while mouse is out, I want this element to revert back to its first position with animation.

// html
------------------------------------
   <div class="wrapper">
        <div class="test"></div>
    </div>

Css

.wrapper {width: 300px; height: 400px; position: relative;}
.test {width:40px; height: 40px; background-color: #0c6; border-radius: 40px; position: absolute; top:100px; left: 100px;}

.wrapper:hover .test{
animation-name:testin ;                        -webkit-animation-name:testin;
animation-duration: 2s;                    -webkit-animation-duration: 2s;
animation-timing-function: ease;             -webkit-animation-timing-function:ease;
animation-iteration-count: infinite;         -webkit-animation-iteration-count: infinite;   
animation-direction: normal;                 -webkit-animation-direction: normal;
animation-delay: 0s;                         -webkit-animation-delay:0s;
animation-play-state: running;               -webkit-animation-play-state: running;
animation-fill-mode: forwards;               -webkit-animation-fill-mode: forwards;

 }

@keyframes testin {
0%{top:100px; left:100px;}
20%{top:150px; left:150px;}
40%{top:200px; left:50px;}
60%{top:250px; left:150px;}
80%{top:300px; left:50px;}
100%{top:350px; left:150px;}

}
@-webkit-keyframes testin {
0%{top:100px; left:100px;}
20%{top:150px; left:150px;}
40%{top:200px; left:50px;}
60%{top:250px; left:150px;}
80%{top:300px; left:50px;}
100%{top:350px; left:150px;}
}

Please tell me if there is any javascript / jquery help or library for this kind of effects.

Thanks

Answer 1

what you want to achieve can be done with JavaScript or JQuery. These two are the ones that triggers functionality in a web page, so in your example the functionality of ":hover" (which is CSS) can also be achieved with JS libraries. In this case a simple one to use is hover(), so let's say we use JQuery library for this, and we'll start off by setting the appropiate scripts and markup in HTML:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1">
        <title>Document</title>
        <link rel="stylesheet" href="css/main.css" />                        


    </head>
    <body>
        <div class="wrapper">
            <div class="test"></div>
        </div>
        <script type= "text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>            
        <script type="text/javascript" src="js/main.js"></script>
    </body>

</html>

Once you have that, we will need to create the other keyframe animation which will be the opposite, something like this:

@keyframes testinBack {
    0%{top:350px; left:150px;}
    20%{top:300px; left:50px;}
    40%{top:250px; left:150px;}
    60%{top:200px; left:50px;}
    80%{top:150px; left:150px;}
    100%{top:100px; left:100px;}
}

@-webkit-keyframes testinBack {
    0%{top:350px; left:150px;}
    20%{top:300px; left:50px;}
    40%{top:250px; left:150px;}
    60%{top:200px; left:50px;}
    80%{top:150px; left:150px;}
    100%{top:100px; left:100px;}
}

Now for the JS part, what we will do is to create a class in CSS from the one you already had, and create two classes, one with the keyframe animation-name: "testin", and the other with "testinBack":

.animationTest{
    animation-name: testin;                      -webkit-animation-name:testin;
    animation-duration: 2s;                      -webkit-animation-duration: 2s;
    animation-timing-function: ease;             -webkit-animation-timing-function:ease;
    animation-iteration-count: infinite;         -webkit-animation-iteration-count: infinite;   
    animation-direction: normal;                 -webkit-animation-direction: normal;
    animation-delay: 0s;                         -webkit-animation-delay:0s;
    animation-play-state: running;               -webkit-animation-play-state: running;
    animation-fill-mode: forwards;               -webkit-animation-fill-mode: forwards;
}

.animationTestBack{
    animation-name: testinBack;                  -webkit-animation-name:testinBack;
    animation-duration: 2s;                      -webkit-animation-duration: 2s;
    animation-timing-function: ease;             -webkit-animation-timing-function:ease;
    animation-iteration-count: infinite;         -webkit-animation-iteration-count: infinite;   
    animation-direction: normal;                 -webkit-animation-direction: normal;
    animation-delay: 0s;                         -webkit-animation-delay:0s;
    animation-play-state: running;               -webkit-animation-play-state: running;
    animation-fill-mode: forwards;               -webkit-animation-fill-mode: forwards;
}

With that created, now the JS part should end up like this:

$( ".wrapper" ).hover(function() {
    $('.test').addClass('animationTestin');
    $('.test').removeClass('animationTestinBack');  
},function(){
    $('.test').removeClass('animationTestin');
    $('.test').addClass('animationTestinBack');
});

So that when you hover on the wrapper you add the class that has the animation going down, and when you hover out, you remove that class and then add the animation going up.

Here is a fiddle: https://jsfiddle.net/n1k5hkff/

Hope it helps, Leo.

how to revert css3 keyframe animation from current frame on mouse out?

Question

1 answers

solution1
0 2016-08-23 21:50:53

how to revert css3 keyframe animation from current frame on mouse out?

Question

1 answers

solution1 0 2016-08-23 21:50:53

solution1
0 2016-08-23 21:50:53