クリックで再生するCSS3アニメーションの4つの部分がありますが、アニメーションの最後の部分は画面からそれを取り除くためのものです。
ただし、一度再生すると、常に元の状態に戻ります。誰でも私ができることを知っています最後のcssフレーム(100%)で停止する、または、再生されたdiv全体を取り除く方法。
@keyframes colorchange {
0% { transform: scale(1.0) rotate(0deg); }
50% { transform: rotate(340deg) translate(-300px,0px) }
100% { transform: scale(0.5) rotate(5deg) translate(1140px,-137px); }
}
この動作を省略形のanimation
プロパティ定義に追加する場合、サブプロパティの順序は次のとおりです。
animation-name
-defaultnone
animation-duration
-default0s
animation-timing-function
-defaultease
animation-delay
-default0s
animation-iteration-count
-default1
animation-direction
-defaultnormal
animation-fill-mode
-これを設定する必要がありますforwards
animation-play-state
-defaultrunning
したがって、最も一般的なケースでは、結果は次のようになります
animation: colorchange 1s ease 0s 1 normal forwards;
MDNのドキュメントはこちら をご覧ください
-webkit-animation-fill-mode: forwards; /* Safari 4.0 - 8.0 */ animation-fill-mode: forwards;
ブラウザサポート
---(使用法:-
.fadeIn {
animation-name: fadeIn;
-webkit-animation-name: fadeIn;
animation-duration: 1.5s;
-webkit-animation-duration: 1.5s;
animation-timing-function: ease;
-webkit-animation-timing-function: ease;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
最善の方法は、CSSの主要部分に最終状態を置くようです。ここのように、幅を220px
に設定して、最終的に220px
になるようにします。しかし、0px;
から
div.menu-item1 {
font-size: 20px;
border: 2px solid #fff;
width: 220px;
animation: slide 1s;
-webkit-animation: slide 1s; /* Safari and Chrome */
}
@-webkit-keyframes slide { /* Safari and Chrome */
from {width:0px;}
to {width:220px;}
}
WebkitAnimationNameを何も設定せず、オブジェクトのCSSをデフォルトの状態にリセットするのは問題ではありません。状態をリセットしているsetTimeout関数を削除するだけで、終了した場所に留まりませんか?
私は同様の答えを投稿しましたが、おそらくあなたは見てみたい:
http://www.w3.org/TR/css3-animations/#animation-events-
開始や停止などのアニメーションの側面を見つけることができます。その後、「停止」イベントが発生したと言ったら、domに対して何でもできます。しばらく前にこれを試してみましたが、うまくいく可能性がありますが、当分の間はWebkitに制限されると思います(ただし、おそらく既に受け入れています)。ところで、私は2つの回答に同じリンクを投稿したので、この一般的なアドバイスを提供します。W3Cをチェックしてください-彼らはほとんどルールを書き、標準を記述しています。また、Webkit開発ページは非常に重要です。
実際に誰もそれを持ってこなかったので、動作させる方法は animation-play-state 一時停止に設定されています。