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 つの操作を実行できます。

使用する構文:

変換: なし|変換関数;

パラメータ:

（１）なし：変換が行われないことを定義します。これは通常、変換を登録するために使用されます。

（２）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）名前：セレクターにバインドする必要があるキーフレーム名。

（２）継続時間：アニメーションを完了するのに必要な時間（秒またはミリ秒単位）。

（３）タイミング関数：アニメーションの動作速度曲線。 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）遅延：アニメーションが開始するまでの遅延を設定します。

（５）反復回数：アニメーションの実行回数を設定します。

（６）方向：アニメーションを逆方向にポーリングするかどうか。 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 タグの記述エラー