CSS3でアニメーションを実装する3つの方法

これは、面接者の CSS に関する基本的な知識をテストするものです。

CSSでアニメーションを実装するには主に3つの方法があります

1つ目は、グラデーションアニメーションを実現するためのトランジションです。

2つ目は、変換遷移アニメーションです。

3つ目は、カスタムアニメーションを実装するためのアニメーションです。

以下に、3 種類のアニメーションの実装方法について詳しく説明します。

遷移グラデーションアニメーション

まず、遷移の特性を見てみましょう。

• プロパティ: 幅、行の高さ、フォント サイズ、色など、DOM スタイルに作用するすべてのプロパティなど、変更する必要がある CSS プロパティを入力します。
• 期間: トランジション効果を完了するのに必要な時間単位 (秒またはミリ秒)
• タイミング関数: エフェクトの速度曲線 (線形、イーズ、イーズイン、イーズアウトなど)
  

タイミング関数の具体的な値は、以下の表で確認できます。

• delay: アニメーション効果の遅延トリガー時間 (単位: ms または s)

完全な例を見てみましょう:

<div class="base"></div>

.base {
            幅: 100ピクセル;
            高さ: 100px;
            表示: インラインブロック;
            背景色: #0EA9FF;
            境界線の幅: 5px;
            境界線のスタイル: solid;
            境界線の色: #5daf34;
            遷移プロパティ: 幅、高さ、背景色、境界線の幅;
            遷移期間: 2秒;
            遷移タイミング関数: イーズイン;
            遷移遅延: 500ms;
        /*略語*/
        /*遷移: すべて 2 秒のイーズイン 500 ミリ秒;*/
            &:ホバー{
                幅: 200ピクセル;
                高さ: 200px;
                背景色: #5daf34;
                境界線の幅: 10px;
                境界線の色: #3a8ee6;
            }
        }

操作効果:

マウスを上に動かすと、アニメーションが 0.5 秒の遅延で開始され、transition プロパティで border-color が設定されていないため、グラデーション アニメーションがないことがわかります。

変換アニメーション

transform プロパティは 2D または 3D 変換を適用します。この属性を使用すると、要素を回転、拡大縮小、傾斜、移動できます。通常は、transition 属性と組み合わせて使用​​されます。

1. none: 変換を定義しません。通常は変換を登録するために使用されます。
2. transform-functions: 変換する型関数を定義します。主なものは次のとおりです。

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

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

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

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

<h5>トランジションはトランスフォームと一緒に使用されます</h5>
<div class="base base2"></div>

.base2{
          変換:なし;
          遷移プロパティ: transform;
          &:ホバー{
              変換:スケール(0.8, 1.5)、回転(35度)、傾斜(5度)、移動(15px, 25px);
          }
      }

操作効果:

ボックスが回転、傾斜、移動、拡大されていることがわかります。

アニメーションカスタムアニメーション

より柔軟なアニメーション効果を実現するために、CSS3 ではカスタム アニメーション機能も提供されています。

（1）名前：セレクターにバインドする必要があるキーフレーム名。

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

（３）タイミング関数：遷移線形と同じ。

（4）遅延：アニメーションが開始するまでの遅延を設定します。

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

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

<h5 class="title">カスタムアニメーションをアニメーション化する</h5>
<div class="base base3"></div>

.base3 {
          境界線の半径: 50%;
          変換:なし;
          位置: 相対的;
          幅: 100ピクセル;
          高さ: 100px;
          背景: 線形グラデーション(
                  35度、
                  #ccffff、
                  #ffcccc
          );
          &:ホバー{
              アニメーション名: バウンス;
              アニメーション期間: 3秒;
              アニメーションの反復回数: 無限;
          }
      }
      @keyframes バウンス{
          0% {
              上: 0px;
          }
          50% {
              上: 249px;
              幅: 130ピクセル;
              高さ: 70px;
          }
          100% {
              上: 0px;
          }
      }

操作効果:

ご覧のとおり、カスタム アニメーションでは、第 1 アニメーションと第 2 アニメーションのすべての機能を含む、より柔軟なアニメーション効果を実現でき、プロパティもより包括的です。

オンライン制作

上記のコードはオンラインで体験できます: 住所

ソースコードアドレス

以上がCSS3でアニメーションを実装する3つの方法の詳細です。CSS3でアニメーションを実装する方法の詳細については、123WORDPRESS.COMの他の関連記事に注目してください。