CSS3アニメーションにはどのような種類があるのでしょうか？

css3 アニメーションには 3 つのタイプがあります: 1. トランジション属性を使用して実現されるグラデーション アニメーション、2. トランスフォーム属性を使用して実現される変形アニメーション、3. アニメーション属性と「@keyframes」ルールを使用して実現されるカスタム アニメーション。

このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。

cssアニメーションを実装するには、主に 3 つの方法があります。1 つ目は、グラデーション アニメーションを実装する transition、2 つ目は、transform 変換アニメーション、3 番目のタイプは次のとおりです: animationカスタム アニメーションを実装するには、3 つのアニメーションの実装について詳しく説明します。

トランジション グラデーション アニメーション

まず transition のプロパティを見てみましょう:

• プロパティ: 必要な CSS プロパティを入力します。変更対象: 幅、行の高さ、フォント サイズ、色など、DOM スタイルに関連するすべてのプロパティ;
• duration: 移行を完了するのに必要な時間単位 (秒またはミリ秒)効果
• timing-function: 完了 エフェクトの速度曲線 (リニア、イーズ、イーズイン、イーズアウトなど)

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

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

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

.base {
            width: 100px;
            height: 100px;
            display: inline-block;
            background-color: #0EA9FF;
            border-width: 5px;
            border-style: solid;
            border-color: #5daf34;
            transition-property: width,height,background-color,border-width;
            transition-duration: 2s;
            transition-timing-function: ease-in;
            transition-delay: 500ms;
	    /*简写*/
	    /*transition: all 2s ease-in 500ms;*/
            &:hover {
                width: 200px;
                height: 200px;
                background-color: #5daf34;
                border-width: 10px;
                border-color: #3a8ee6;
            }
        }

ランニング効果:

マウスを押したときにそれがわかります。このとき、アニメーションは 0.5 秒遅れて開始され、border-color が transition-property に設定されていないため、グラデーション アニメーションはありません。

transform 変換アニメーション

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

• #none: 定義は変換を実行しません。通常は変換を登録するために使用されます。

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

  1. 回転: 主に 2D 回転と 3D 回転に分かれます。回転(角度)、2次元回転、パラメータは45度などの角度です; 回転(x,y,z,角度)、3次元回転、元の場所から(x,y,z)までの直線を中心とした3次元回転。回転X(角度)、X軸に沿って3D回転を実行; 回転Y(角度); 回転Z(角度);

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

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

  4. 移動 (移動): 主に要素を移動するために使用されます。 translate(x, y)、x 軸と y 軸に移動するピクセルを定義します;translate(x, y, z)、x、y、z 軸に移動するピクセルを定義します;translateX(x)、translateY(y); Z(z)を変換します。

<h5>transition配合transform一起使用</h5>
<div class="base base2"></div>

.base2{
          transform:none;
          transition-property: transform;
          &:hover {
              transform:scale(0.8, 1.5) rotate(35deg) skew(5deg) translate(15px, 25px);
          }
      }

実行効果:

##ボックスが回転、傾斜、平行移動、および移動したことがわかります。拡大しました。

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

(2) 継続時間: アニメーションが完了するまでにかかる時間 (秒またはミリ秒)。
(3) タイミング関数: 遷移線形と同じ。
(4) 遅延: アニメーションが開始されるまでの遅延を設定します。
(5) iteration-count: アニメーションの実行回数を設定します。infinite は無限ループです。
(6) 方向: アニメーションを逆方向に再生するためにポーリングするかどうか。 Normal、デフォルト値、アニメーションは通常どおりに再生されます。alternate、アニメーションは順番に逆方向に再生されます。

<h5 class="title">animate自定义动画</h5>
<div class="base base3"></div>

.base3 {
          border-radius: 50%;
          transform:none;
          position: relative;
          width: 100px;
          height: 100px;
          background: linear-gradient(
                  35deg,
                  #ccffff,
                  #ffcccc
          );
          &:hover {
              animation-name: bounce;
              animation-duration: 3s;
              animation-iteration-count: infinite;
          }
      }
      @keyframes bounce{
          0% {
              top: 0px;
          }
          50% {
              top: 249px;
              width: 130px;
              height: 70px;
          }
          100% {
              top: 0px;
          }
      }

カスタム アニメーションでは、最初のすべてのアニメーションを含む、より柔軟なアニメーション効果を実現できることがわかります。 1 番目と 2 番目のアニメーションの機能が強化され、プロパティはより包括的になります。

css ビデオ チュートリアル)

以上がCSS3アニメーションにはどのような種類があるのでしょうか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。