CSS アニメーション プロパティの使用方法とサンプル コード (transition/transform/animation)

CSS アニメーション プロパティの使用方法とサンプル コード (transition/transform/animation)

開発中、優れたユーザー インターフェイスには常にいくつかのアニメーションが組み込まれます。 CSS は最小限のコードでユーザーに最高の体験を提供します。以下に、CSS アニメーション属性の使用方法とユースケース コードをいくつかまとめましたので、ご参照ください。間違いがあれば、直接コメントしていただければ幸いです。

1 遷移

使用構文:

transition: プロパティ期間タイミング関数遅延;

パラメータ:

(1) プロパティ(トランジション効果を設定するためのCSSプロパティ名):none | all | property。 none は、どのプロパティもトランジション効果を取得しないことを意味し、all はすべてのプロパティがトランジション効果を取得することを意味します。property は、複数のプロパティがカンマ (,) で区切られた CSS プロパティ リストを意味します。

(2)継続時間(トランジション効果を完了するまでの時間を設定します):秒またはミリ秒(s/ms)。

(3) タイミング関数 (効果の速度曲線を設定します): linear、効果が同じ速度で開始および終了することを指定します。cubic-bezier(0,0,1,1) に相当します。ease、ゆっくり開始してゆっくり終了します。cubic-bezier(0.25,0.1,0.25,1) に相当します。ease-in、ゆっくり開始します。cubic-bezier(0.42,0,1,1) に相当します。ease-out、ゆっくり終了します。cubic-bezier(0,0,0.58,1) に相当します。ease-in-out、ゆっくり開始してゆっくり終了します。cubic-bezier(0.42,0,0.58,1) に相当します。cubic-bezier(n,n,n,n)、この関数で独自の値を定義します。値は 0 から 1 の間です。

(4) 遅延(トランジション効果の開始時間):トランジション効果が実行されるまでにかかる秒数の値。たとえば、2sは2秒後に実行されることを意味します。

2 変換

transform プロパティは 2D または 3D 変換を適用します。このプロパティを使用すると、要素に対して回転、拡大縮小、傾斜、移動の 4 つの操作を実行できます。

使用する構文:

変換: なし|変換関数;

パラメータ:

(1)なし:変換が行われないことを定義します。これは通常、変換を登録するために使用されます。

(2)transform-functions:変換する型関数を定義する。主なものは次のとおりです。

回転:主に2D回転と3D回転に分かれます。 rotate(angle)、2D 回転、パラメータは角度 (45deg など)。rotate(x,y,z,angle)、3D 回転、元の位置から (x,y,z) までの線の周りの 3D 回転。rotateX(angle)、X 軸に沿った 3D 回転。rotateY(angle)、rotateZ(angle)。

スケール: 通常は要素のサイズを設定するために使用されます。主なタイプは上記と同じで、scale(x, y)、scale3d(x, y, z)、scaleX(x)、scaleY(y)、scaleZ(z) などがあります。ここで、x、y、z は収縮率です。

傾斜: 主に要素のスタイルを傾けるために使用されます。 skew(x-angle, y-angle)、x軸とy軸に沿った2D skew変換、skewX(angle)、x軸に沿った2D skew変換、skew(angle)、y軸に沿った2D skew変換。

移動(移動):主に要素を移動するために使用されます。 translate(x, y) は、x 軸と y 軸に沿って移動するピクセル ポイントを定義します。translate(x, y, z) は、x 軸、y 軸、z 軸に沿って移動するピクセル ポイントを定義します。translateX(x)、translateY(y)、translateZ(z)。

3 アニメーション

このプロパティは主にアニメーションのプロパティを設定するために使用されます。

使用する構文:

アニメーション: 名前 期間 タイミング関数 遅延 反復回数 方向;

パラメータ:

(1)名前:セレクターにバインドする必要があるキーフレーム名。

(2)継続時間:アニメーションを完了するのに必要な時間(秒またはミリ秒単位)。

(3)タイミング関数:アニメーションの動作速度曲線。 linear は、速度の開始と終了が同じ速度で行われることを指定します。これは、cubic-bezier(0,0,1,1) と同等です。ease は、ゆっくり開始してゆっくり終了します。これは、cubic-bezier(0.25,0.1,0.25,1) と同等です。ease-in は、ゆっくり開始し、cubic-bezier(0.42,0,1,1) と同等です。ease-out は、ゆっくり終了し、cubic-bezier(0,0,0.58,1) と同等です。ease-in-out は、ゆっくり開始してゆっくり終了します。これは、cubic-bezier(0.42,0,0.58,1) と同等です。cubic-bezier(n,n,n,n) は、この関数で独自の値を定義し、値は 0 から 1 の間です。

(4)遅延:アニメーションが開始するまでの遅延を設定します。

(5)反復回数:アニメーションの実行回数を設定します。

(6)方向:アニメーションを逆方向にポーリングするかどうか。 normal はデフォルト値で、アニメーションは通常どおり再生されます。alternative はアニメーションを逆の順序で再生します。

以下に、これらの要素のテスト コードを示します。

<!DOCTYPE html>
<html>
<ヘッド>
    <title>トランジション/変換</title>
</head>
<スタイル タイプ="text/css">
    #div1 {
        フロート: 左;
        高さ: 100px;
        幅: 100ピクセル;
        背景色: 赤;
    }
    #div2 {
        フロート: 左;
        高さ: 100px;
        幅: 100ピクセル;
        背景色: 緑;
    }
    #div3 {
        フロート: 左;
        高さ: 100px;
        幅: 100ピクセル;
        背景色: 青;
    }
    #div4 {
        フロート: 左;
        高さ: 100px;
        幅: 100ピクセル;
        背景色: #234F21;
    }
    #div5 {
        フロート: 左;
        高さ: 100px;
        幅: 100ピクセル;
        背景色: #af123c;
    }
    #div6 {
        フロート: 左;
        高さ: 100px;
        幅: 100ピクセル;
        背景色: #affa3c;
    }
    /* トランジションは複数のプロパティを実装します */
    #div1:アクティブ{
        幅:200px;
        高さ: 200px;
        トランジション: 幅 2 秒のイーズ、高さ 2 秒のイーズ。
        -moz-transition: 幅 2s 遷移、高さ 2s 遷移; /* Firefox 4 */
        -webkit-transition: width 2s easy, height 2s easy; /* Safari および Chrome */
        -o-transition: width 2s easy,height 2s easy; /* Opera */
    }
    /* 変換 回転 */
    #div2:ホバー{
        変換:回転(35度);
        -ms-transform:rotate(35deg); /* IE 9 */
        -moz-transform:rotate(35deg); /* Firefox */
        -webkit-transform:rotate(35deg); /* Safari と Chrome */
        -o-transform:rotate(35deg); /* オペラ */
    }
    /* スケールを変換 */
    #div3:ホバー{
        変換:スケール(0.8, 1.5);
        -ms-transform:scale(0.8, 1.5); /* IE 9 */
        -moz-transform:scale(0.8, 1.5); /* Firefox */
        -webkit-transform:scale(0.8, 1.5); /* Safari と Chrome */
        -o-transform:scale(0.8, 1.5); /* オペラ */
    }
    /* スキューを変換する */
    #div4:ホバー{
        変換:skew(35度);
        -ms-transform:skew(35deg); /* IE 9 */
        -moz-transform:skew(35deg); /* Firefox */
        -webkit-transform:skew(35deg); /* Safari と Chrome */
        -o-transform:skew(35deg); /* オペラ */
    }
    /* 変換 翻訳 */
    #div5:ホバー{
        変換:translate(45px, 45px);
        -ms-transform:translate(45px, 45px); /* IE 9 */
        -moz-transform:translate(45px, 45px); /* Firefox */
        -webkit-transform:translate(45px, 45px); /* Safari と Chrome */
        -o-transform:translate(45px, 45px); /* オペラ */
    }
    /* 複数のエフェクトを変換する */
    #div6:ホバー{
        変換:回転(35度)、スケール(0.8, 1.5)、傾斜(35度)、移動(45ピクセル, 45ピクセル);
        -ms-transform:rotate(35deg) scale(0.8, 1.5) skew(35deg) translate(45px, 45px); /* IE 9 */
        -moz-transform:rotate(35deg) scale(0.8,rotate(35deg) scale(0.8, 1.5) skew(35deg) translate(45px, 45px) translate(45px, 45px); /* Safari と Chrome */
        -o-transform:rotate(35deg) scale(0.8, 1.5) skew(35deg) translate(45px, 45px); /* オペラ */
    }
</スタイル>
<本文>
    <div id="div1">トランジション</div>
    <div id="div2">変換 回転</div>
    <div id="div3">変換スケール</div>
    <div id="div4">変形スキュー</div>
    <div id="div5">変換 翻訳</div>
    <div id="div6">変換</div>
</本文>
</html>

<!DOCTYPE html>
<html>
<ヘッド>
    <title>トランジション/変換</title>
</head>
<スタイル タイプ="text/css">
    /* アニメーション */
    .div7 {
        幅:100ピクセル;
        高さ:100px;
        背景:赤;
        位置:相対;
        アニメーション:myfirst 5s infinite;
        アニメーションの方向:代替;
        /* Safari と Chrome */
        -webkit-animation:myfirst 5s 無限;
        -webkit-アニメーション-方向:代替;
    }
    @keyframes myfirst{
        0% {背景:赤; 左:0px; 上:0px;}
        25% {背景:黄色; 左:200ピクセル; 上:0ピクセル;}
        50% {背景:青; 左:200ピクセル; 上:200ピクセル;}
        75% {背景:緑; 左:0px; 上:200px;}
        100% {背景:赤; 左:0px; 上:0px;}
    }
    @-webkit-keyframes myfirst{/* Safari と Chrome */
        0% {背景:赤; 左:0px; 上:0px;}
        25% {背景:黄色; 左:200ピクセル; 上:0ピクセル;}
        50% {背景:青; 左:200ピクセル; 上:200ピクセル;}
        75% {背景:緑; 左:0px; 上:200px;}
        100% {背景:赤; 左:0px; 上:0px;}
    }
  @-moz-keyframes myfirst #Firefox#
    0% {背景:赤; 左:0px; 上:0px;}
        25% {背景:黄色; 左:200ピクセル; 上:0ピクセル;}
        50% {背景:青; 左:200ピクセル; 上:200ピクセル;}
        75% {背景:緑; 左:0px; 上:200px;}
        100% {背景:赤; 左:0px; 上:0px;}
  }
  @-o-keyframes myfirst オペラ */
    0% {背景:赤; 左:0px; 上:0px;}
        25% {背景:黄色; 左:200ピクセル; 上:0ピクセル;}
        50% {背景:青; 左:200ピクセル; 上:200ピクセル;}
        75% {背景:緑; 左:0px; 上:200px;}
        100% {背景:赤; 左:0px; 上:0px;}
  }
</style> <body> <div class="div7">アニメーション</div> </body> </html>

要約する

以上が、エディターによる CSS アニメーション属性の使用方法とサンプルコード (トランジション/変換/アニメーション) の紹介です。皆様のお役に立てれば幸いです。ご質問がある場合は、メッセージを残してください。エディターがすぐに返信します。

<<:  DockerでLinuxシェルコマンドを実行する方法

>>:  よくある HTML タグの記述エラー

推薦する

要素テーブルの行と列のドラッグを実装する例

要素 ui テーブルにはドラッグ アンド ドロップによる並べ替え機能が組み込まれておらず、サードパー...

MySQL 5.6 の「暗黙的な変換」によりインデックスが失敗し、データが不正確になる

背景SQL クエリを実行するときに、where 条件の vachar 型フィールドの単一引用符を削除...

SQL文におけるGROUP BYとHAVINGの使用に関する簡単な説明

GROUP BY 句と HAVING 句を紹介する前に、まず SQL 言語の特殊な関数である集計関数...

vue-video-player を使用してライブ放送を実現する方法

目次1. vue-video-playerをインストールする2. vue-video-playerを...

Vue+Openlayerはmodifyを使用して要素の完全なコードを変更します

Vue+Openlayerはmodifyを使って要素を変更します。具体的な内容は以下のとおりです。 ...

簡単な計算機を実装する小さなプログラム

この記事の例では、簡単な計算機を実装するための小さなプログラムの具体的なコードを参考までに共有してい...

Oracle の MySQL バージョンでユーザー Scott のテーブル ステートメントを作成する例

概要: Oracle scottユーザーには4つのテーブルがあり、実験やデータ検証に便利です。現在は...

ページ下部のフッターを修正する方法(複数の方法)

フロントエンド Web エンジニアとして、ページ効果を作成するときに次の現象に遭遇したことがあるはず...

Linux で誤って削除したメッセージ ファイルを復元する方法

プロセスで使用されていて、誤って削除されたファイルがある場合、それらを回復することができます。プロセ...

Vue のトランジション効果とアニメーショントランジションの使用例の詳細な説明

目次遷移フック関数カスタム遷移クラス名遷移グループの使用まとめまずは例を見てみましょうコードは次のと...

xshellを使用してLinuxサーバーに接続する

xshellを使用してLinuxに接続する利点Windows環境でLinuxを直接操作できるインター...

Matlab による JavaScript プログラミング、重心アルゴリズムによる位置決め学習

目次Matlab セントロイドアルゴリズムMatlab はクローズドな商用ソフトウェアであり、米国政...

HTML テーブル マークアップ チュートリアル (4): 境界線の色属性 BORDERCOLOR

テーブルを美しくするために、テーブルにさまざまな境界線の色を設定できます。基本的な構文<テーブ...

node.jsのインストールとHbuilderXの設定の詳細な説明

npm インストールチュートリアル: 1. Node.jsインストールパッケージをダウンロードする公...

vue-cli で stimulsoft.reports.js を使用する詳細なチュートリアル

vue-cli は stimulsoft.reports.js を使用します (ナニーレベルのチュー...