css3のキーフレームアニメーションをマウスの現在のフレームから元に戻すにはどうすればいいですか？

私は現在のアニメーションのフレームから最初の位置に戻したいと思います。ここでは、このコードでは単純なcss3キーフレームアニメーションとそのホバー上での作業を記述しました。マウスが出ている間、私はこの要素をアニメーションで最初の位置に戻したいと思っています。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;} 
}

効果のこの種の任意のジャバスクリプト/ jqueryのヘルプまたはライブラリがある場合教えてください。

ありがとうございました

出典

2016-08-22 Subhajit Das

JavaScriptまたはJQueryで達成したいことができます。これらの2つは、Webページの機能をトリガーするものです。そのため、あなたの例では、CSSライブラリの "：hover"の機能をJSライブラリで実現することができます。あなたがいることをしたら

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

：この場合、使用する単純な一つはホバーは（）ので、我々はこのためにjQueryライブラリを使用しましょう、と私たちはHTMLでappropiateスクリプトやマークアップを設定することから始めましょうです、我々は逆になり、他のキーフレームアニメーションを作成する必要があります、このような何か：

@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」の2つのクラスを作成します。

作成されたものと

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

それは、レオがお役に立てば幸いです。

出典

2016-08-23 21:50:53 Leo

css3のキーフレームアニメーションをマウスの現在のフレームから元に戻すにはどうすればいいですか？

答えて

関連する問題