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

1. CSS3アニメーション

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

.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. 翻訳する
translate 、 translate(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の新機能

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

ここに画像の説明を挿入

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

(選擇器)

ここに画像の説明を挿入

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

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

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