CSS3アニメーションとHTML5の新機能の詳しい説明

CSS3アニメーションとHTML5の新機能の詳しい説明

1. CSS3アニメーション

☺CSS3 アニメーションは、JavaScript を介して要素のスタイルを動的に変更するよりもはるかに簡単で、パフォーマンスも優れています。 CSS3 には、 transformtransitionanimationという 3 つのアニメーション プロパティがあります。
1. 変換
transform主に、 rotatescaleskewtranslatematrixといった要素の形状を変更するために使用されます。
例:

.transform-class {
    変換: 回転(30度) スケール(2,3);
}

1.1. transform-origin 基点 すべての変換は基点に基づいて行われ、デフォルトでは要素の中心点になります。使用法: transform-origin:(x,y) 、X、Y は、パーセンテージ、px、rem、または左、右、中央 (X)、上、中央、下 (Y) になります。
例:

.transform-class {
    変換の原点: (左、下);
}

1.2. rotate は指定された角度だけ要素を回転します。正の数の場合は時計回りに回転し、負の数の場合は反時計回りに回転します。
例:

.transform-rotate{
    変換: 回転(30度);
}

1.3. スケール
scaleを使用する方法は 3 つあります: scale(x,y)scaleX(x)scale(Y)です。ズーム率が 1 より大きい場合は拡大され、1 に等しい場合は元のサイズ、1 より小さい場合は縮小されます。
例:

.変換スケール{
    変換: スケール(2,1.5);
}

.transform-scaleX {
    変換: scaleX(2);
}

.transform-scaleY {
    変換: スケールY(1.5);
}

1.4. 翻訳する
translatetranslate(x,y)translateX(x)translateY(y)の 3 つのケースがあります。
例:

.transform-translate {
    変換: translate(400px, 20px);
}

.transform-translateX {
    変換: translateX(300px);
}

.transform-translateY {
    変換: translateY(20px);
}

1.5. 歪曲収差
skewの書き方はskew(xdeg,ydeg)skewX(xdeg)skewY(ydeg)の 3 つで、単位 deg は角度です。
例:

.transform-skew {
    変換: skew(30deg, 10deg);
}

.transform-skewX {
    変換: skewX(30deg);
}

.transform-skewY {
    変換: skewY(10deg);
}

1.6、マトリックス
簡単なマトリックスの詳細
2. 移行
transition 、要素が 1 つの状態から別の状態にスムーズに遷移する方法を設定するために使用されます。

  • transition-property
  • transition-duration
  • transition-timing-function (遷移の速度)
  • transition-delay

3. アニメーション
animationは、Flash のフレーム単位のアニメーションに似ており、映画の再生と同様に、非常に繊細で柔軟性があります。遷移では、開始状態と終了状態のみを指定します。フレーム単位のアニメーションはキーフレームで構成されます。多数のキーフレームを連続的に再生することでアニメーションが構成されます。CSS3 では、フレーム単位のアニメーションを完成させるために keyframes 属性が使用されます。
@キーフレーム

  • animationName: アニメーション名(自分で名前を付けてください)
  • パーセンテージ: パーセンテージ値 [pəˈsentɪdʒ]
  • properties: スタイル プロパティ名 (color、left など)

例:

@keyframes アニメーション名 {
   から {
       プロパティ: 値;
   }
   パーセンテージ
       プロパティ: 値;
   }
   に {
       プロパティ: 値;
   }
}
//または
@keyframes アニメーション名 {
   0% {
       プロパティ: 値;
   }
   パーセンテージ
       プロパティ: 値;
   }
   100% {
       プロパティ: 値;
   }
}

2. H5の新機能

  1. キャンバス要素を描画するために使用されます。
  2. メディア再生用のビデオおよびオーディオ要素。
  3. localStorage のローカルオフラインストレージにはデータが長期間保存され、ブラウザを閉じてもデータは失われません。一方、sessionStorage のデータはブラウザを閉じると自動的に削除されます。
  4. (新標簽) より優れたセマンティックコンテンツ要素

ここに画像の説明を挿入

フォーム コントロール: カレンダー、日付、時刻、電子メール、URL、検索。

(選擇器)

ここに画像の説明を挿入
ここに画像の説明を挿入

CSS3アニメーションとHTML5の新機能に関するこの記事はこれで終わりです。CSS3アニメーションとHTML5の新機能に関するより関連性の高いコンテンツについては、123WORDPRESS.COMの過去の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも123WORDPRESS.COMをよろしくお願いいたします。

<<:  js のループメソッドとさまざまなトラバーサルメソッド

>>:  tomcat+nginx を使用してマルチアプリケーション デプロイメントを実装するためのサンプル コード

推薦する

vsftpd ユーザーが ssh 経由でログインすることを禁止する方法

序文vsftp は使いやすく安全な FTP サーバー ソフトウェアです。システムユーザーまたは仮想ユ...

HTML+CSS ボックスモデルの例 (円、半円など) 「border-radius」はシンプルで使いやすい

多くの友人は、フロントエンドを学習するときに、ボックス モデルがデフォルトで正方形であることに気付き...

3つの簡単な例を使ってハイパーリンクの下線を削除する方法

ハイパーリンクの下線を削除するには、スタイルシート CSS を使用する必要があります。当面は CSS...

CentOS6で定期的にjarプログラムを実行するスクリプトをcrontabで実行する

1. 簡単なJavaプログラムを書く パブリッククラステストシェル{ パブリック静的voidメイン(...

htm 初心者ノート(初心者は必ず読んでください)

1. HTMLとは何かHTML (ハイパーテキスト マークアップ言語): ハイパーテキスト マーク...

HTML要素のID属性とName属性の違い

今日、私は <a href="#13"></a> につい...

MySQL テーブルを作成するためによく使用される SQL ステートメントの概要

最近、私はプロジェクトに取り組んでおり、背景を記述するために SQL ステートメントを使用する必要が...

VMware仮想マシンを使用してUbuntu 20.04をインストールする完全なチュートリアル

Ubuntu は比較的人気のある Linux デスクトップ システムです。最近、Ubuntu 20....

MySQL MVCCメカニズム原理の詳細な説明

目次MVCCとはMySQL ロックとトランザクション分離レベルMySQL 元に戻すログMVCCの実装...

MySQL のテーブルリターンとインデックスカバレッジの例の詳細な説明

目次インデックスタイプインデックス構造非クラスター化インデックスクエリインデックスカバー要約するイン...

Vue 仮想リストの実例

目次序文デザイン成し遂げるまとめ序文最近は、いつも延々とスワイプしています。 Weibo をチェック...

docker+gitlab+gitlab-runnerの詳細なデプロイメント

環境サーバー: centos7クライアント: ウィンドウCentos7 に docker+gitla...

Angularの親子コンポーネント通信の詳細な説明

目次使用されるAPI簡単な例人.ts親コンポーネントサブコンポーネント効果要約する使用されるAPI ...

Tinymce リッチテキストを使用して Vue のツールバーボタンをカスタマイズする実践

目次tinymce、tinymce ts、tinymce-vue 宣言ファイルをインストールするパッ...

MySQLの文字セットを変更する方法

1. MySQLの文字セットを確認する '%char%' のような変数を表示します。...