CSS3属性トランジション、アニメーション、トランスフォーム

今回はCSS3のプロパティtransition、animation、transformを使用する際の注意事項についてお届けします。実際のケースを見てみましょう。

最近、会社のニーズに応えて、アニメーションを作成するためにCSS3を使用する必要があり、これまで混乱していた3つの属性をようやく理解しました。

記憶を深めるために、ここで簡単に比較してください。

ブラウザの互換性

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;

その他の比較

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

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

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

省略形の比較:

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;}
}

ブラウザ互換性の関係で、アニメーションを定義する際にもここに記述する必要があります。

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

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

CSSで0.5ピクセルの線を作成する方法

Css3 Transitionスムーズトランジションメニューバーの実装

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