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 を使用してマルチアプリケーション デプロイメントを実装するためのサンプル コード

推薦する

要素のel-tree複数選択ツリー(チェックボックス)親子ノードの関連付けが関連付けられていません

属性チェック-厳密公式ドキュメントでは、チェックボックスが表示されるときに親項目と子項目を互いに関連...

JavaScriptのイベントループの仕組みの分析

目次序文: 1. イベント ループとタスク キューの理由: 2. イベントループメカニズム: 3. ...

単一/複数行テキストを含む div を垂直方向に中央揃えする N 通りの方法 (高さ不明/高さ固定)

この問題について話すとき、垂直方向の中央揃えを設定するための vertical-align 属性が ...

Docker コンテナにデータベースをデプロイする場合の欠点は何ですか?

序文Docker は過去 2 年間で非常に人気が高まっています。開発者はすべてのアプリケーションとソ...

Linuxでシンボリックリンクを削除(削除)するコマンド

Linux では、シンボリック リンクを作成または削除する必要がある場合があります。もしそうなら、何...

MySql のインデックス、ロック、トランザクションの知識ポイントのまとめ

この記事では、MySql のインデックス、ロック、トランザクションに関する知識のポイントをまとめてい...

JavaScript でオブジェクトのプロパティを削除する方法

1. 削除delete は、オブジェクトのプロパティを残さずに削除する唯一の方法ですが、その「代替」...

CSS3は遷移を高速化し、遅延させる

1. 速度制御機能を使用して、トランジション効果(加速、減速など)の速度曲線を制御します。速度制御機...

MySQL トリガー構文とアプリケーション例

この記事では、例を使用して MySQL トリガーの構文とアプリケーションを説明します。ご参考までに、...

知っておくべき 7 つのネイティブ JS エラーの種類

目次概要1. 範囲エラー2. 参照エラー3. 構文エラー4. タイプエラー5. URIエラー6. 評...

Debian 9 システムに MySQL データベースをインストールする方法

序文タイトルを見ると、誰もが「Debian 9 に MySQL をインストールするにはどうすればいい...

Vue補間式とv-textディレクティブの違い

目次1. プラグイン式を使用する2. プラグイン式でv-cloakを使用してちらつきの問題を解決する...

フレームセットの共通プロパティ(フレームとウィンドウの分割)

フレームとは、Web ページ画面を複数のフレームに分割したもの(複数の Web ページという形で表示...

Web フロントエンドのパフォーマンス最適化の詳細説明: リソースのマージと圧縮

2つの目的のためのリソースの結合と圧縮httpリクエストの数を減らす要求されたリソースのサイズを縮小...

CentOS7 のシステム サービスに Nginx を追加する方法

導入コンパイル、インストール、問題の解決後、Nginx は正常に動作していますが、現時点では Ngi...