CSS3 トランジション、変換、アニメーションの概要_html/css_WEB-ITnose

CSS3 は、ページ上のスタイル変換を実現するためにトランジション、トランスフォーム、およびアニメーション アニメーションを提供します。この記事では、これらのプロパティを簡単に紹介し、CSS3 アニメーションと JS アニメーションのどちらのパフォーマンスが優れているかを比較します。

トランジション、トランスフォーム、アニメーションの概要

transition

transition を使用すると、CSS プロパティ値を特定の時間間隔内でスムーズに遷移できます。 構文は次のとおりです:

transition ： transition-property transition-duration transition-timing-function transition-delay [, ...]

transition-property
は、実行するプロパティを指定するために使用されます。トランジション効果。なし、すべて、または特定の属性にすることができます。

transition-duration
アニメーションの実行期間 (s (秒) または ms (ミリ秒) 単位)。

transition-timing-function
変換レート効果、オプションの値は、ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier (カスタム時間曲線) です。

transition-delay
は、アニメーションの実行を開始する時間を指定するために使用されます。値は、transition-duration と同じですが、負の数にすることもできます。

デモ: http://codepen.io/CodingMonkeyzh/pen/ZGBRVe

transform

transform は 2D と 3D に分けられます。ここでは、主に次の変換を含む、より一般的に使用される 2D 変換のみを紹介します。 、ツイスト スキュー、スケール スケール、移動移動、および行列変形行列の構文は次のとおりです:

transform: rotate | scale | skew | translate |matrix;

rotate 回転
• 回転の単位は度で、正の数は時計回りの回転、負の数は反時計回りの回転を意味します。
  デモ: http://codepen.io/CodingMonkeyzh/pen/XbNYOa
  
scale スケーリング
• scale の値の範囲は 0~n で、1 未満の場合は縮小を意味し、それ以外の場合は拡大を意味します。例えば、scale(0.5, 2) は、水平方向を 1 倍に縮小し、垂直方向を 1 倍に拡大することを意味します。また、scaleX またはscaleY によって 1 つの方向を設定することもできます。
  デモ: http://codepen.io/CodingMonkeyzh/pen/doOKrg
  
スキュー歪み
• スキューの単位は回転と同じで、度です。たとえば、skew(30deg, 10deg) は、水平方向が 30 度、垂直方向が 10 度傾いていることを意味します。
  デモ: http://codepen.io/CodingMonkeyzh/pen/KpNeYg
  
オフセットを翻訳する
• オフセットには、水平オフセットと垂直オフセットも含まれます。 translation(x,y) は水平方向と垂直方向に同時に移動します (つまり、X 軸と Y 軸が同時に移動します)。垂直方向 (Y 軸移動)。
  デモ: http://codepen.io/CodingMonkeyzh/pen/waoXbB
  

animation

CSS3 のアニメーションは Keyframes と呼ばれるものを通じて制御され、その名前は "@keyframes" で始まります。アニメーション」と中括弧のペア「{}」。括弧の中には、さまざまな期間に対するスタイル ルールがいくつかあります。これは、CSS スタイルの記述方法に似ています。 「0%」と「100%」の間など、複数のパーセンテージで構成される「@keyframes」のスタイル ルールの場合、構文は次のとおりです。

@keyframes IDENT {  from {    Properties: Properties value;  }  Percentage {    Properties: Properties value;  }  to {    Properties: Properties value;  }}或者全部写成百分比的形式： @keyframes IDENT {  0% {    Properties: Properties value;  }  Percentage {    Properties: Properties value;  }  100% {    Properties: Properties value;  }}

animation には、transition などの独自の対応する属性があり、 then in Thereアニメーションの種類は主に次のとおりです: アニメーション期間; アニメーション遅延; アニメーション再生状態。属性の一部については以下で説明します。

animation-name keyframe name
• は、アニメーションの名前を定義するために使用されます。値が の場合、デフォルト値は none です。 none、アニメーション効果はありません。複数のアニメーションを 1 つの要素に同時にアタッチしたい場合は、それらをカンマで区切ってください。
  
animation-iteration-count アニメーションのループ数
• デフォルトは 1 です。無限にループしたい場合は、無限に設定してください。
  
animation-direction アニメーションの再生方向
• デフォルト値は 2 つだけです。normal に設定すると、アニメーションの各サイクルが順方向に再生され、その機能は再生をアニメーション化することです。偶数回では順方向に再生され、奇数回では逆方向に再生されます。
  
animation-play-state 再生状態
• 主に、running と paused の 2 つの値があり、running がデフォルト値です。現在再生中のアニメーションを一時停止によって停止したり、一時停止したアニメーションを実行によって再生したりすることができます。この属性は一般的には使用されません。
  

デモ 1: http://codepen.io/CodingMonkeyzh/pen/mJOKZY

デモ 2: http://codepen.io/CodingMonkeyzh/pen/EjNpaE