ホームページ > 記事 > ウェブフロントエンド > CSS3 Transform、Transition、Animation プロパティの概要
ブラウザのサポート:
Internet Explorer 10、Firefox、Opera は、transform 属性をサポートします。
Internet Explorer 9 は、代替の -ms-transform 属性をサポートします (2D 変換のみ)
Safari および Chr は、代替の -webkit-transform プロパティをサポートします。 (3D および 2D 変換)
Opera は 2D 変換のみをサポートします
関数
定義。 2D変形、移動要素の幅と高さを変更して 2D スケーリング変換を定義します | |
---|---|
行列(n,n,n, n,n,n) | |
の変換メソッドをすべて使用します。つまり、デフォルトでは、要素変換の基点は要素の中心になります。ただし、異なる位置にある要素に対してこれらの操作を実行する必要がある場合は、transform-origin を使用して要素の基本位置を変更できます。この属性は 3 つのパラメータを受け取ることができます: transform-origin: x 軸、y 軸、z 軸、 x 軸、水平方向の値を表し、文字パラメータ値を左、中央に取ることができます 右
ChromeとSafariは接頭辞-webkit-を追加する必要がありますOperaはまだ3D変換をサポートしていません(2D変換をサポートしています)。 -次元変換が使用されます。 2D 変換に基づく同じプロパティ。 CSS3 の 3D 変換 には主に次の関数が含まれます:
W3C css3 の遷移は標準では次のように記述されています: 「css の遷移により、css の属性値が一定の時間間隔内でスムーズに遷移することができます。この効果は次のように達成できます。」マウスクリック クリック、フォーカスの取得、クリックされること、または要素への何らかの変更によってトリガーされ、アニメーション効果を伴う CSS プロパティ値をスムーズに変更します。「
」 transition-property: HTML 要素 のどの CSS 属性がトランジション グラデーション処理を実行するかを指定します。この属性には、color、width、height などのさまざまな標準 CSS 属性を指定できます。
Internet Explorer 9 以前のバージョンは、transition 属性をサポートしていません。 Internet Explorer 10、Firefox、Opera、Chrome は、transition 属性をサポートしています。 Chrome 25 以前および Safari では、接頭辞 -webkit- が必要です。 アニメーション アニメーション アニメーションを使用するには、まずkeyフレーム、つまりキーフレームの文法規則に慣れる必要があります。名前は「@keyframes」で始まり、その後に「アニメーションの名前」に 1 を加えたものになります。中括弧「{}」、括弧内にはさまざまな期間に対するスタイル ルールがいくつかあります。さまざまなキーフレームは、from (0% に相当)、to (100% に相当)、またはパーセンテージ (ブラウザーのサポートを最適化するために、パーセンテージを使用することをお勧めします) で表され、 @keyframes が定義されています。これが機能するには、アニメーションを通じてセレクターにバインドする必要があります。そうでない場合、アニメーションは効果がありません。アニメーションの属性は以下にリストされています: Inplorer 10、Firefox、およびOpera は @Keyframes ルールとアニメーション プロパティをサポートしています 注: Internet Explorer 9 およびそれ以前のバージョンでは、@keyframe ルールまたはアニメーション属性をサポートしていません
上記のコンテンツは http://blog.csdn.net/ からのものです。 u014607184/article/details/51801393 |
以上がCSS3 Transform、Transition、Animation プロパティの概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。