CSSアニメーションの状態と再生時間のハッキング

この記事では、CSSアニメーションの操作を掘り下げ、JavaScriptを使用せずにアニメーションの再起動と遅延の課題に特に対処します。著者は、CSSのみのWolfenstein 3Dにインスパイアされたゲームを構築した経験を語り、2つの特にトリッキーなアニメーションの問題を強調しています。

コアの問題は、ブラウザのアニメーション状態の処理を中心に展開します。アニメーションが既に実行されている間にアニメーションプロパティを追加または変更するだけで、予想どおり常に再起動または遅くなるとは限りません。

問題1：アニメーションのリプレイ

著者は、アニメーションを再生するためのいくつかのアプローチを探ります。

• 複数のチェックボックス（効果はありません）： CSSは既存のアニメーションのみを継続し、再起動しないため、アニメーションの試行ごとに個別のチェックボックスを使用します。
• アニメーションクローニング：各トリガーの個別のアニメーション名（ spin1 、 spin2 ）を作成しますが、慎重なCSSルールの順序が必要です。
• Appending Animations：同じアニメーションをanimation-nameプロパティに複数回追加することも機能しますが、 animation-fill-mode: forwardsで予期しない動作につながる可能性があります。

重要なポイントは、CSSアニメーションを直接再起動できないことです。新しいものを追加する必要があります。

問題2：スローモーション

アニメーションが実行されている間にanimation-duration変更するだけで、ジャンプが不快になります。ブラウザは、現在の状態ではなく、アニメーションの開始から新しい期間を適用します。

いくつかのアプローチが検討されています：

• 直接animation-duration変更（効果がない）： animation-duration途中でアニメーションの変化は視覚的な不具合を引き起こします。
• 遅いアニメーションの一時停止とアプリメント：元のアニメーションを一時停止し、同じ出発点で遅いアニメーションを追加すると、予測不可能な一時停止ポイントのためにジャンプにつながります。
• カスタムプロパティの使用：より洗練されたメソッドは、カスタムプロパティ（ --angle1 、 --angle2 ）を使用して、アニメーションの進行状況を追跡し、異なる期間でアニメーション間のシームレスに移行します。ただし、これには@propertyのブラウザサポートが必要です。
• 「ギアシフト」テクニック：この巧妙なテクニックは、アニメーションを備えたネストされたDIVを使用して、アニメーション速度を切り替えます。それはアニメーション固有であり、一般化しません。
• JavaScript Solutions： JavaScriptは、アニメーションの進捗状況を処理し、異なるアニメーション速度間をシームレスに移行するためのより堅牢なソリューションを提供し、複雑なアニメーションに柔軟性を提供します。

この記事は、他のCSSのみのプロジェクトからのインスピレーションを認め、CSSアニメーションの操作に伴う課題とソリューションの包括的な概要を提供することで締めくくります。著者は、読者が提供された例を探求し、自分の考えを共有することを奨励しています。

以上がCSSアニメーションの状態と再生時間のハッキングの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。