如何在鼠标移出时从当前帧还原CSS3关键帧动画？

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. 在此代码中，我编写了一个简单的css3关键帧动画及其在悬停中的工作。 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 的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. 请告诉我是否有此类效果的javascript / jquery帮助或库。

Thanks 谢谢

Answer 1

what you want to achieve can be done with JavaScript or JQuery. 您想要实现的目标可以使用JavaScript或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. 这两个是触发网页功能的功能，因此在您的示例中，“：hover”（即CSS）的功能也可以通过JS库实现。 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: 在这种情况下，一个简单的使用方法是hover（），因此我们为此使用了JQuery库，我们将从在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": 现在，对于JS部分，我们要做的是从已有的CSS中创建一个类，并创建两个类，一个类的关键帧动画名称为：“ testin”，另一个为“ 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: 创建完成后，现在JS部分应该像这样结束：

$( ".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/ 这是一个小提琴： https : //jsfiddle.net/n1k5hkff/

Hope it helps, Leo. 希望能帮上忙，狮子座。

如何在鼠标移出时从当前帧还原CSS3关键帧动画？

问题描述

1 个解决方案

解决方案1
0 2016-08-23 21:50:53

如何在鼠标移出时从当前帧还原CSS3关键帧动画？

问题描述

1 个解决方案

解决方案1 0 2016-08-23 21:50:53

解决方案1
0 2016-08-23 21:50:53