222

クリックで4つの部分からなるCSS3アニメーションを再生していますが、アニメーションの最後の部分は、画面から外すためのものです。

ただし、再生すると常に元の状態に戻ります。誰もが最後の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); }
}
4

8 に答える 8

438

あなたが探しています：

animation-fill-mode: forwards;

canIuseの MDNとブラウザ サポート リストの詳細。

于 2010-12-06T03:31:37.913 に答える
38

この動作を省略形のanimationプロパティ定義に追加する場合、サブプロパティの順序は次のとおりです。

animation-name-デフォルト none

animation-duration-デフォルト 0s

animation-timing-function-デフォルト ease

animation-delay-デフォルト 0s

animation-iteration-count-デフォルト 1

animation-direction-デフォルト normal

animation-fill-mode-これをに設定する必要があります forwards

animation-play-state-デフォルト running

したがって、最も一般的なケースでは、結果は次のようになります

animation: colorchange 1s ease 0s 1 normal forwards;

MDN のドキュメントはこちら

于 2017-08-21T09:59:42.520 に答える
5

最良の方法は、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;}
}
于 2013-05-03T16:51:31.963 に答える
3

webkitAnimationName を何も設定していないため、オブジェクトの CSS がデフォルトの状態にリセットされているという問題ではありませんか。状態をリセットしている setTimeout 関数を削除しただけでは、元の場所に留まりませんか?

于 2010-12-07T03:38:07.470 に答える
1

同様の回答を投稿しましたが、おそらく次をご覧ください。

http://www.w3.org/TR/css3-animations/#animation-events-

開始や停止などのアニメーションの側面を見つけることができます。その後、「停止」イベントが発生したと言うと、dom に対してやりたいことが何でもできます。しばらく前にこれを試してみましたが、うまくいく可能性がありますが、当面は webkit に制限されると思います (ただし、おそらく既にそれを受け入れているでしょう)。ところで、私は2つの回答に同じリンクを投稿したので、この一般的なアドバイスを提供します.W3Cをチェックしてください-彼らはほとんどルールを書き、標準を説明しています. また、Webkit 開発ページも非常に重要です。

于 2010-12-13T19:42:13.347 に答える
0

誰も実際にそれをもたらしたわけではありませんが、動作させる方法は、アニメーションの再生状態を一時停止に設定することです。

于 2017-10-18T12:46:32.733 に答える
-2

今日、塗りつぶしモードに使用したい制限があることを知りました。これはApple開発者からのものです。噂では * 6 前後ですが、定かではありません。または、クラスの初期状態をアニメーションの終了方法に設定してから、 from / 0% で * 初期化 * することもできます。

于 2010-12-07T05:24:46.587 に答える