CSS3のトランジション、トランスフォーム、アニメーションとは何ですか? 3つの違い-CSSチュートリアル-php.cn

CSS3のトランジション、トランスフォーム、アニメーションとは何ですか? 3つの違い

青灯夜游

リリース： 2018-09-19 15:47:07

オリジナル

2510 人が閲覧しました

この章では、CSS3 におけるトランジション、トランスフォーム、アニメーションとは何かを紹介します。 3 つの違い。困っている友人は参考にしていただければ幸いです。

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 と同じですが、負の数にすることもできます。

transform

transform は 2D と 3D に分かれています。ここでは、より一般的に使用される 2D 変換のみを紹介します。その主な変換には、回転、回転、歪み、スケーリング、スケールと変換、および行列変換行列が含まれます。構文は次のとおりです。

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

ログイン後にコピー

変換の関連プロパティ:

rotate 回転
回転の単位は度で、正の数は時計回り、負の数は反時計回りを意味します。
scale Scale
scale の値の範囲は 0 ～ n で、1 未満の場合は縮小、それ以外の場合は拡大を意味します。例えば、scale(0.5, 2) は、水平方向を 1 倍に縮小し、垂直方向を 1 倍に拡大することを意味します。また、scaleX またはscaleY によって 1 つの方向を設定することもできます。
スキュー歪み
スキューの単位は回転と同じで度です。たとえば、skew(30deg, 10deg) は、水平方向が 30 度、垂直方向が 10 度傾いていることを意味します。
オフセットの変換
オフセットには、水平オフセットと垂直オフセットも含まれます。 translation(x,y) は水平方向と垂直方向に同時に移動します (つまり、X 軸と Y 軸が同時に移動します)。垂直方向 (Y 軸移動)。

アニメーション

CSS3 のアニメーションは、キーフレームと呼ばれるものによって制御されます。名前は「@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-name キーフレーム名:
は、アニメーションの名前を定義するために使用されます。これは、前のコマンドで作成されたアニメーションの名前です。 keyframes 、デフォルト値は none です。値が none の場合、アニメーション効果はありません。複数のアニメーションを 1 つの要素に同時にアタッチしたい場合は、それらをカンマで区切ってください。
animation-iteration-count アニメーションループの数:
デフォルトは 1 です。無限にループしたい場合は、それを無限に設定します。
animation-direction アニメーションの再生方向:
値は 2 つだけです。標準に設定すると、アニメーションの各サイクルが順方向に再生されます。 ; もう 1 つの値は、偶数回ではアニメーションを順方向に再生し、奇数回では逆方向にアニメーションを再生する機能です。
animation-play-state 再生状態:
主に実行中と一時停止の 2 つの値があり、そのうち実行中がデフォルト値です。一時停止により現在再生中のアニメーションを停止したり、実行により一時停止したアニメーションを再生したりすることができます。この属性は一般的には使用されません。

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