CSS3のトランジションとアニメーションの違いは何ですか

CSS3 におけるトランジションとアニメーションの違い: 1. CSS トランジションにはイベント トリガーが必要ですが、CSS アニメーションには必要ありません; 2. CSS トランジションには、開始と終了を設定するキー フレームが 1 セット (2 つ) しかありません。 CSS アニメーションでは複数のキーフレームを定義できます。

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

#transition トランジション

CSS の変更をよりスムーズにする

Attribute:

PropertyDescriptiontranstion-property##transtion-durationトランジションに必要な時間を指定しますtranstion-timing-functionトランジション関数を指定しますtranstion-delay移行遅延時間を指定します構文:

transiton: 过渡属性 过渡所需要时间 过渡动画函数 过渡延迟时间；    //合在一起

トランジションのプロパティを指定します

チェストナット:

<style>
img{
    height:150px;
    width:150px;
    transition: height 0.5s linear 0.5s;
}
img:hover{
    height:100px;
}
</style>

移行の利点はシンプルで使いやすいことですが、いくつかの大きな制限があります。

遷移にはイベント トリガーが必要なため、Web ページの読み込み時に自動的に遷移することはできません。

移行は 1 回限りのイベントであり、何度もトリガーしない限り繰り返し発生することはできません。
• 遷移では開始状態と終了状態のみを定義できますが、中間状態は定義できません。
• 遷移ルール​​は 1 つの属性に対する変更のみを定義でき、複数の属性を含めることはできません。
• CSS アニメーションは、これらの問題を解決するために提案されました。

アニメーション アニメーション

キー フレームを制御してアニメーションの各ステップを制御し、より複雑なアニメーション効果を実現します

プロパティ:

#プロパティ説明#animation-nameキーフレーム アニメーションの名前を指定しますanimation-durationアニメーションの再生に必要な時間を秒単位で指定しますanimation-timing-functionアニメーションの再生方法を指定します##アニメーションの開始時間を秒単位で指定します##animation -iteration- countアニメーションを再生する回数を指定します。デフォルトは 1 です。無限の場合、無限ループで再生されますanimation-direction アニメーションの再生方向を指定します。デフォルトは通常です。交互の場合は、順番に逆方向に再生されます。アニメーションは次のとおりです。

##animation-detail
	キーフレームを使ったアニメーションの宣言

キーフレームを使って宣言したアニメーションをアニメーション内で呼び出します。

• @キーフレームはキー フレームであり、アニメーションには多数のフレームが存在します。
  @keyframes のスタイル ルールは複数のパーセンテージで構成されています。このルールに複数のパーセンテージを作成して、常に変化する効果を実現できます。
• 栗:

  <style>
      img{
          width:90px;
          height:90px;
          animation: mychange 1s infinate 1s;
          -webkit-animation: mychange 1s infinate 1s;
      }
      
      @keyframes mychange{
          0%{width:90px; height:90px;  }
          50%{width:130px; height:130px;}
          100%{width:200px; height:200px;}
      }
      @-webkit-keyframes mychange{
          0%{width:90px; height:90px;  }
          50%{width:130px; height:130px;}
          100%{width:200px; height:200px;}
      }
  </style>

  上記のコードの 0% と 100% のパーセント記号は省略できません。0% は from に、100% は to に置き換えることができます。 mychange アニメーションに効果を与えるには、CSS3 アニメーション プロパティを通じて呼び出す必要があります。

CSS トランジションとアニメーションの違い

主な違いは、トランジションでは CSS プロパティを時間の経過とともに変更するイベントをトリガーする必要があることです。イベントをトリガーせずに、アニメーションは時間の経過とともに要素の CSS プロパティを明示的に変更して、アニメーション効果を実現することもできます。

1) CSS トランジションが機能するには、イベント (:hover など) によってトリガーされる必要がありますが、アニメーションはそうではありません。

2) トランジションには 1 セット (開始と終了の 2 つ) のキー フレームのみがあり、アニメーションでは複数のキー フレームを定義できます。 3) トランジションとアニメーションを使用して、マウスがホバリングしているときに動的な効果を作成します。マウスを遠ざけると、アニメーションがスナップしながら、トランジションによって作成された効果がゆっくりと元の外観に戻ります。本来の自分に戻りましょう。

(学習ビデオ共有:

css ビデオ チュートリアル

、

Web フロントエンド入門チュートリアル

)

以上がCSS3のトランジションとアニメーションの違いは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。