最後のアニメーションでキーフレームアニメーションを停止する方法

私の100％キーフレームでアニメーションを止めたいと思っています。最後のアニメーションでキーフレームアニメーションを停止する方法

ここでは、jQueryが下部に表示されています。私が完全に理解しようとしているのは、これらのボックスをどのようにアニメーション化して、上のほうをクリックすれば下に移動し、下のものは上に移動するということです。何か案は？ 100％のキーフレームに停止

<html> 
    <head> 
    <meta charset="utf-8"> 
    <title></title> 
    <style> 
    @keyframes active { 
     0% { 
     transform: translateX(0px); 
     } 
     33% { 
     transform: translateX(105px); 
     } 
     66% { 
     transform: rotateY(180deg) translateY(210px); 
     } 
     100% { 
     transform: rotateY(0deg) translateY(210px); 
     } 
    } 
     .all-wrap {border: 1px solid black; 
     } 
     .container {width:100px;height:100px;background-color:red; 
     perspective:400px;perspective-origin:50% 100px; 
     margin-right:auto; 
     display: block; 
     border: 2px solid purple; 
     animation-fill-mode: forwards; 
     background-repeat: no-repeat; 
     } 
     .containerActive { 
     animation: active 3s ease-in-out; 
     animation-fill-mode: forwards; 
     animation-iteration-count: 1; 
     transform-style: preserve-3d; 
     animation-direction: normal; 
     } 
    </style> 
    </head> 
    <body> 
    <div class="all-wrap"> 
     <div class="container"> 
     </div> 
     <div class="container"> 
     </div> 
    </div> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <script src="/js/rotate.js"></script> 
    </body> 
</html> 

/* Here is the jQuery: */ 

$('[class*="container"]').on('click', function(){ 
    $(this).toggleClass('containerActive'); 
    });

出典

2017-03-19 Zach Broniszewski

は、このコードで満たされる必要があります。

animation-fill-mode: forwards;

これは、以前ここで扱われています Stopping a CSS3 Animation on last frame

出典

2017-03-20 00:37:23

私のコードを見てみましょう。私はそれを含めたと確信しています。 –

なぜこれがダウン投票を得るのか分かりません。私はこれが元のコードに含まれていたことを知っています。問題は他の場所に存在しなければならない。私が提供したコードは正しいです。 –

実装したコードが問題と共存する場合、提供したコードはどのように正しいですか？ –

私はそれを解決してきました。私のキーフレーム以外はすべてが完璧でした。最初は180度回転させていたので、元の向きに戻すために180度回転させて100％回転させることになります。私は正しい翻訳をするために100％が必要なので、100％で宣言することはできません。だから私は巧妙なアイデアを思いついた、私はそれが欲しいものの半分を回転度にするのはどうですか？これは完全なターンの外観を与えるだろう。

キーフレーム：

@keyframes active { 
     0% {transform: translateX(0px);} 
     25% {transform: translateX(105px);} 
     50% {transform: translate(105px, 105px);} 
     75% {transform: rotateY(90deg) translate(-105px, 105px);} 
     100% {transform: translate(0px, 105px);} 
    } 
@keyframes active2 { 
     0% {transform: translateX(0px);} 
     25% {transform: translateX(105px);} 
     50% {transform: translate(105px, -105px);} 
     75% {transform: rotateY(90deg) translate(-105px, -105px);} 
     100% {transform: translate(0px, -105px);} 
    }

出典

2017-03-20 06:16:15

最後のアニメーションでキーフレームアニメーションを停止する方法

答えて

関連する問題