最近、CSS3 アニメーションのソース コードの実装をいくつか見ていたところ、CSS コード アニメーションの中に「steps」というあまり馴染みのない単語を見つけました。ソース コードでは次のように書かれています。 関連情報を調べたところ、steps関数は 手順 関連情報を調べたところ、 実際、ステップ関数と div { アニメーション: 1 秒の線形無限交互移動。 } @keyframes 移動 { 0% { 左マージン: 0; } 30% { 左マージン: 50px; } 100% { 左マージン: 100px; } } @keyframes でキーフレームを定義するだけです。cubic steps 関数は、数値と位置の 2 つのパラメーターを受け取ります。 number は正の整数で、position には start と end の 2 つの値があります。先ほど、steps の 2 つの特殊な値、step-start と step-end について説明しました。これらは実際にはそれぞれ steps(1, start) と steps(1, end) を表します。これら 2 つのパラメータは何を意味するのでしょうか? number: number はアニメーションがいくつのセグメントに分割されるかを示します。たとえば、上記の例では、div が 0px から 100px に移動するプロセス全体が 4 つのセグメントに分割されることを示しています。 position: 位置パラメータはオプションで、デフォルトは end です。 start と end はどういう意味ですか? 私の理解では、その数字はアニメーション プロセス全体を複数のセグメントまたはサイクルに分割します。start は、アニメーションの状態が各サイクルの開始点で瞬時に変化することを意味し、end は、アニメーションの状態が各サイクルの終了点で瞬時に変化することを意味しま す。以下は W3C 公式ドキュメントからの画像です: 上の画像の座標系では、x 軸が時間、y 軸がアニメーションの進行状況を表しています。この画像で注目すべきは、アニメーションの状態を表す実線の点です。ステップ(1、開始)を表す最初の図を見てみましょう。これまでの説明によれば、アニメーション全体が 1 サイクルとなり、サイクルの開始点でアニメーションの状態が変化するように start パラメータが指定されているため、最初の実線円の座標は (0,1) であることがわかります。 2 枚目の画像では、end が指定されているため、サイクルの終了点でアニメーションの状態が突然変化するため、対応する 2 つの実線円の座標は (0,0) と (1,1) になります。次のステップ(3, start)とステップ(3, end)についても同様ですが、ここでは詳細に分析しません。 次に、steps 関数の役割をより直感的に理解するために、いくつかの例を挙げて理解を深めます。 参考までに、一貫したアニメーションを以下に示します。コードの一部は次のとおりです。 div { 幅: 100ピクセル; 高さ: 100px; 背景色: 赤; アニメーション: 2 秒線形移動; } @keyframes 移動 { 0% { 左マージン: 0; } 100% { 左マージン: 200px; } } 効果は以下のとおりです。 赤い四角形が2秒後に終点まで一定の速度で移動し、その後開始位置に戻ることがわかります。 以下は手順(1, 開始)の例です。 div { 幅: 100ピクセル; 高さ: 100px; 背景色: 赤; アニメーション: 2 秒ステップ開始で移動します。 } 効果は以下のとおりです。 更新をクリックした瞬間にブロックが終点に到達し、2 秒後に開始位置に戻ることがわかります。 ステップ(1, 終了)の例を見てみましょう: div { 幅: 100ピクセル; 高さ: 100px; 背景色: 赤; アニメーション: 2 秒ステップ移動 - 終了; } 効果は以下のとおりです。 更新をクリックしてもブロックが動かないことがわかります。これは、2 秒後にブロックが瞬時に 200 ピクセルの位置に移動し、アニメーションが終了して開始位置に戻るためです。このプロセスは非常に高速で肉眼では見えないため、ブロックが動いていないように見えます。終了点に留まりたい場合は、div に 複数のセグメントに分割する状況を見てみましょう。まず、スタートが複数のセグメントに分割されます。 div { 幅: 100ピクセル; 高さ: 100px; 背景色: 赤; アニメーション: 4秒ステップ移動(4, start); } 効果は以下のとおりです。 上記の例では、4 秒のアニメーションを 4 つのサイクルに分割しています。ブロックは各サイクルの開始点、つまり 0 秒、1 秒、2 秒、3 秒で移動します。上記のエフェクト ダイアグラムから、更新をクリックした瞬間に状態の変更が完了し、3 秒後に終了点に到達することもわかります。アニメーションが終了するまで 1 秒間終了点に留まり、開始位置に戻ります。 end が複数のセグメントに分割される状況を見てみましょう。 div { 幅: 100ピクセル; 高さ: 100px; 背景色: 赤; アニメーション: 4秒ステップ移動(4, end); } 効果は以下のとおりです。 end を指定すると、各サイクルの終了時 (この場合は 1 秒、2 秒、3 秒、4 秒) にアニメーションの状態が変化します。上記のエフェクト図から、更新をクリックしてから 1 秒後にブロックが移動し始め、4 秒後にブロックが終了点に移動する瞬間に、アニメーションの終了によりブロックが開始位置に戻るため、ブロックが終了点に移動していないという錯覚が生じることがわかります。 要約する 上記は、エディターが導入した CSS3 アニメーション ステップ機能の詳細な説明です。皆様のお役に立てれば幸いです。ご質問がある場合は、メッセージを残してください。エディターがすぐに返信します。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。 |
<<: MySQLのkillがスレッドをkillできない理由
>>: インターフェーステストプラットフォームを構築するためのDjango+Vue+Dockerの詳細な説明
Web デザインは、個人の好みや Web ページの内容に応じて、デザインのレイアウトが常に変化します...
MySQL は次の 3 種類のコメントをサポートしています。 1. 行末の「#」文字から。 2. 「...
突然、ドキュメントの保存と共同作業のためのプライベート サービスを構築する必要がありました。多くの場...
この記事では、VMware WorkstationにKylinをインストールする方法を参考までに紹介...
2.1、msiインストールパッケージ2.1.1、インストール特に重要なのは、インストール前に、元の ...
数十 MB 程度の小さいものから 1G 以上の大きいものまで、ビデオ ファイルなどのファイルのアップ...
目次序文ステップ1: セットアップと前方屈折ステップ2: 反射とフレネル方程式ステップ3: 多面屈折...
目次1. 概要2. 名前フィールド3. バージョンフィールド4. 説明フィールド5. キーワードフィ...
Docker は、安全で繰り返し可能な環境でソフトウェアを自動的にデプロイする方法を提供し、コンピュ...
NATこのようにして、仮想マシンのネットワーク カードはホストの VMnet8 に接続されます。この...
CSS3 アニメーションで実現したシンプルでクールな効果。最終的な効果は次のようになります。 ページ...
この記事では主にボタンのスタイルについて説明します。 1. オプション2. サイズ3. 活動状況4....
注意:仮想マシンのメモリは2G以上が推奨され、 Alibaba Cloudのアクセラレーションイメー...
目次プレースホルダーの置き換えコンソール印刷テーブル()ログ、情報、警告、エラーグループ()、グルー...
序文:最近、プロジェクトで管理システムに遭遇しました。権限設定が非常に興味深いと思いました。自分の学...