ホームページ > 記事 > ウェブフロントエンド > CSS3 アニメーション関連_html/css_WEB-ITnose
CSS3 アニメーション関連_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:51:201126ブラウズ
CSS3 アニメーション関連のプロパティ: 変換、トランジション、アニメーション
TransformTransform
構文:
transform: 回転 | 傾斜 | 行列;
回転: オリジナルに対して角度を指定して回転この要素は 2D 回転を実行します。正の値は時計回りの回転を示し、負の値は反時計回りの回転を示します。デフォルトの原点は中心位置であり、transform-origin を設定できます。
scale: スケール、X 方向と Y 方向のスケール係数を指定して、元の要素の 2D スケーリングを実行します。
skew: 歪み、X 方向と Y 方向の傾き角度を指定して元の要素を歪めます。
translate: 移動、X 方向と Y 方向の移動長を指定して要素を移動します。正の値は右下に移動します。
matrix: 行列変換
例:
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>CSS3</title> <style type="text/css"> div{ width:100px; height:100px; background:#3385ff; margin: 60px; } #rotate{ transform:rotate(30deg); } #scale{ transform:scale(2,1.5); } #skew{ transform:skew(30deg,10deg); } #translate{ transform:translate(50%,80%); } </style></head><body> <div id="rotate">Rotate</div> <div id="scale">Scale</div> <div id="skew">Skew</div> <div id="translate">Translate</div></body></html> Picture:
Transition
Transition には主に 4 つの属性値が含まれます: 遷移を実行する属性:transition-property、変換の期間:transition-持続時間、持続期間において、変化の速度は、変化のタイミング関数、変化の遅延時間、変化の遅延を表します。
例:
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>CSS3</title> <style type="text/css"> div{ width:100px; height:100px; background:#3385ff; margin: 60px; } #transition{ transition:width 2s,height 2s; } div:hover{ width:200px; height:200px; transform:rotate(180deg); }</style></head><body> <div id="transition">Transition</div></body></html> 写真 1
写真 2 (マウスオーバー)
アニメーション
アニメーションはトランジションに似ていますが、違いはトランジションが CSS プロパティを変更するイベントをトリガーする必要があることです。アニメーショントリガーされないため、時間の経過とともに CSS プロパティを変更できます。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。