如何在鼠标退出时从当前帧恢复css3关键帧动画？答案

【问题标题】：how to revert css3 keyframe animation from current frame on mouse out?如何在鼠标退出时从当前帧恢复css3关键帧动画？
【发布时间】：2016-08-24 05:50:53
【问题描述】：

我想从当前动画帧恢复到我的第一个位置。在这段代码中，我编写了一个简单的 css3 关键帧动画及其悬停工作。当鼠标不在时，我希望这个元素通过动画恢复到它的第一个位置。

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

请告诉我是否有任何 javascript / jquery 帮助或此类效果的库。

谢谢

【问题讨论】：

标签： javascript jquery css animation

【解决方案1】：

您想要实现的目标可以使用 JavaScript 或 JQuery 来完成。这两个是在网页中触发功能的，因此在您的示例中，“：悬停”（即 CSS）的功能也可以通过 JS 库来实现。在这种情况下，一个简单的使用方法是 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>

完成后，我们需要创建另一个相反的关键帧动画，如下所示：

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

现在对于 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;
}

创建之后，现在 JS 部分应该是这样结束的：

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

因此，当您将鼠标悬停在包装器上时，您添加了动画向下的类，当您将鼠标悬停在外面时，您删除了该类，然后添加了向上的动画。

这是一个小提琴： https://jsfiddle.net/n1k5hkff/

希望对你有帮助，狮子座。

【讨论】：