CSS3の2つの一時停止方法（トランジション、アニメーション）を詳しく解説

座標を変更する 2 つの方法:

1. 従来の上部と左の座標変更

2. CSS3 のtransform属性

は、CSS3アニメーションとトランジションの組み合わせによって文字の歩行効果を実現します。一般的に言えば、さらなる操作を容易にするために、運動の状態は制御可能である必要があります。アニメーションはキャラクターの動きの変化、つまりスプライトマップの位置の変更を実現するために使用され、トランジションはキャラクターの左の変化、つまり座標が右に移動し、キャラクターが前に進むことを実現します。と背景が後ろに移動します。

トランジションの一時停止方法
トランジション、一般的に一時停止する場所はプログラムが最初に設定した目標点なので、実際にはこれを制御する必要はなく、これを制御する方法もありません。これは アニメーション トランジション効果の場合、ブラウザーはアニメーションの終了時のコールバックのみを提供します。もちろん、回避策はあります。 ターゲットの遷移値を強制的に変更する処理を実行します
操作方法:

$("button:last").click(function() {
        var left = $boy.css('left');
        // 强制做了一个改变目标left的处理
        // 动画是要运行10秒,所以此时动画还是没有结束的
        $boy.css('left',left);
        // 增加暂停的样式
        $boy.addClass('pauseWalk');
 });

遷移を停止するには、現在の左の値に強制的に移動することです。詳細については、上記のコード ブロックを参照してください。一時停止メソッドのトランジションでは、一時停止効果を実現するために強制的に左座標が設定されます。ただし、これには問題があります。

アニメーション一時停止メソッド

CSS3アニメーションは、アニメーションの一時停止処理を制御するアニメーション再生状態スタイルを直接提供します。コントロールの一時停止スタイルを追加するときは、さまざまなブラウザーの互換性に特に注意してください。対応するアニメーション キャラクター要素ノードでこのスタイルを動的に追加および削除するだけです。このエルフの開始と一時停止を簡単に制御できます

【関連する推奨事項】

1.

CSS3 のアニメーション方向プロパティを詳しく紹介します

2. マスターしなければならない CSS3 アニメーション (アニメーション) の 8 つのプロパティ

3.

アニメーション属性を使用してループ間の遅延実行を実装するチュートリアル

4.

CSS3 アニメーション (アニメーション) 終了イベントを監視する例を共有します

以上がCSS3の2つの一時停止方法（トランジション、アニメーション）を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。