CSS3 アニメーション関連属性のトランジション、アニメーション、トランスフォームの包括的な比較

トランジション、アニメーション、トランスフォームは不明瞭な場合があります。この記事では主に、アニメーションに関連する CSS3 プロパティのトランジション、アニメーション、トランスフォームの比較を紹介し、ブラウザの互換性、使用法、比較を通じて、互いの類似点と相違点をより深く説明します。 、および具体的な操作については、以下の詳細な説明をご覧ください。興味のある方はぜひ参考にしてください。

ブラウザの互換性

CSS3のtransform属性

Internet Explorer 10、Firefox、Operaはtransform属性をサポートしています。

Internet Explorer 9 は、代替の -ms-transform 属性をサポートしています (2D 変換のみ)。

Safari と Chrome は、代替の -webkit-transform プロパティ (3D および 2D 変換) をサポートしています。

Opera は 2D 変換のみをサポートします。

transform:rotate(7deg);
-ms-transform:rotate(7deg);     /* IE 9 */
-moz-transform:rotate(7deg);     /* Firefox */
-webkit-transform:rotate(7deg); /* Safari 和 Chrome */
-o-transform:rotate(7deg);     /* Opera */

CSS3 アニメーション プロパティ

Internet Explorer 10、Firefox、Opera はアニメーション プロパティをサポートしています。

Safari と Chrome は、代替の -webkit-animation 属性をサポートしています。

注: Internet Explorer 9 以前のバージョンは、アニメーション プロパティをサポートしていません。

使用法:

animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /* Safari 和 Chrome */

CSS3 遷移プロパティ

Internet Explorer 10、Firefox、Opera、および Chrome は、transition プロパティをサポートしています。

Safari は、代替の -webkit-transition プロパティをサポートしています。

注: Internet Explorer 9 以前のブラウザは、transition 属性をサポートしていません。

使用法:

transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari 和 Chrome */
-o-transition: width 2s;

その他の比較

トランジションとアニメーションはアニメーションプロパティであり、トランスフォームは静的プロパティです。
英語の単語の理解によると、変換、変換、変換は主に変位、サイズ、位置、形状の変換を指します。属性変換を直接記述すると、変換された形状と位置が得られます。
トランジションとアニメーションは両方ともアニメーション プロパティであるため、両方とも次の
プロパティ
duration
timing-function
delay

プロパティ、アニメーション時間、アニメーション フォーム、遅延時間を持ちます。アニメーションの場合、プロパティはアニメーションの名前になります。これはアニメーションに固有の属性です:

animation-iteration-count
animation-direction
1 つはアニメーションの再生回数を定義するもので、もう 1 つはアニメーションを順番に逆再生するかどうかを定義するものです。

省略形の比較:

transition属性:transition、つまりCSSの変更プロセスの遷移なので、transition属性を定義する意味は、定義されたtransition属性が変更されると、次に従って変換されます。このトランジションのアニメーションは、厳密な直接変換ではなく、アニメーションの優れた方法を提供します。一般的には次のように書きます:
-webkit-transition: すべて 0.85 秒、イーズイン 0.1 秒;
-o-transition: すべて 0.85 秒、イーズイン 0.1 秒;トランジション:all 0.85sease-in 0.1s;
all は、このトランジションに従ってすべての属性変更が変更されることを意味します
アニメーションの書き方:
-webkit-animation:tang1 0.5sease 0s無限代替;
animation:tang1 0.5s ease 0s 無限代替;
省略形で、アニメーションの後にアニメーションの数と順番に逆再生するかどうかが続きます

アニメーションはアニメーションの名前で始まるため、ここでは最初にアニメーションがどのように変形するかを定義する必要があります:

@keyframes tang1
{
from {left:0px;}
to {left:200px;}
}

@-webkit-keyframes tang1 /*Safari and Chrome*/
{
from {left:0px;}
to {left:200px;}
}

ブラウザがSexに対応しているので、アニメーションを定義する際にもこれを記述する必要があります。

from は 0% 時間を表し、to は 100% 時間を表します。

関連する推奨事項:

CSS3のトランジション属性のインスタンス分析

トランジションには主に4つの属性値の紹介が含まれています

CSSでのアニメーションアニメーションの使用に関するチュートリアル

トランジションの比較css3のアニメーションとの違いとつながり

CSS3での変形の詳細な紹介

以上がCSS3 アニメーション関連属性のトランジション、アニメーション、トランスフォームの包括的な比較の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。