CSS3 アニメーション関連_html/css_WEB-ITnose-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

CSS3 アニメーション関連_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:51 AM

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 までご連絡ください。