Question

我希望从目前的动画帧恢复到我的第一个位置。在这段代码中，我编写了一个简单的css3关键帧动画，并在hover上工作。当鼠标移出时，我希望这个元素恢复到动画的第一个位置。

// 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帮助或库。

由于

Answer 1

您想要实现的目标可以通过JavaScript或JQuery完成。这两个是在网页中触发功能的，因此在您的示例中，“：hover”（也就是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/

希望它有所帮助，利奥。

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

1 个答案: