CSS3の新機能まとめ(トランジション)_html/css_WEB-ITnose

CSS トランジション は CSS3 仕様の一部であり、CSS プロパティの変更速度を制御するために使用されます。 プロパティの変更プロセスをすぐに有効にするのではなく、一定期間継続させることができます。たとえば、要素の色を白から黒に変更すると、通常、この変更はトランジションを使用した後すぐに有効になり、カーブ レートで変化します。このプロセスはカスタマイズできます。

Transition は省略された属性であり、4 つの値の順序です (単独で使用され、transition-prefix を加えます):

property

duration

timing-function

lay

Transition は、特定の属性値の変更を完了することですしたがって、デフォルト値は 0 であるため、transition-duration を設定する必要があります。

Transition-Property:

トランジション時に指定されたプロパティのみがアニメーション効果を生成します。 all、all を入力できます。

#demo {    width:20px;    height:20px;    background-color:#0080FF;    transition:width 1.5s;}#demo:hover {    width:30px;    height:30px;}

は、幅の変更のみをアニメーション化します。

#demo {    width:20px;    height:20px;    background-color:#0080FF;    transition-property:width , height;/*写多个值用逗号分割*/    transition-duration:2s;/*过渡持续时间可以只写一个,也可分别指定,同样用逗号分割*/}

略語を使用する場合は、複数のプロパティを指定できます。

#demo {    width:20px;    height:20px;    background-color:#0080FF;    transition:width 2s, height 4s;/*两条定义之间用逗号分割,后两个值为选填.*/}

サブプロパティを使用するときに注意すべき点がいくつかあります。

#demo {    transition-property:width , height , top;    transition-duration:2s , 3s;/*定义时间个数少于属性个数,会再次循环数组*/}/*相当于*/#demo {    transition-property:width , height , top;    transition-duration:2s , 3s , 2s;}

#demo {    transition-property:width , height;    transition-duration:2s , 3s , 2s;/*定义时间个数多于属性个数,多出的值会被截取*/}/*相当于*/#demo {    transition-property:width , height;    transition-duration:2s , 3s;}

Transition-duration:

遷移の継続時間を秒またはミリ秒で設定します。イージングと組み合わせた設定された期間を通じて、この関数は属性値の変化に対応するカーブを計算します

たとえば、幅が 4 秒以内に 100px から 200px に変化する場合、単純に 125px- の 4 つのフレームに分割されます。 150px-175px-200px; 原理はアニメーションの from to と似ているはずです。

のカーブを設定しますここでは W3School の例を示します。ブラウザに組み込まれているいくつかのアニメーション カーブも cubic-bezier(n,n,n,n) でカスタマイズできます。n は次の値です。 0-1;

イージング関数の完全なセット。デフォルトで設定されていない場合は、ゆっくりと開始し、その後速くなり、その後ゆっくり終了します。

アニメーションが開始するまでの待ち時間を設定します。 (デフォルトは 0、遅延なし);

ストレッチ後 2 秒のマウスホバー

トランジションを使用すると、ページをより動的に見せることができます

Hover me

.demo-button {  border:0px;  background-color:#2aaacb;  position:relative;  padding:0.7em 1.8em;  font-size:1.1em;  border-radius:3px;  margin-right:2em;  color:#fff;  -webkit-transform: translateZ(0);  transform: translateZ(0);}.demo-button:before {  content: "";  z-index:-1;  position: absolute;  width: 100%;  height: 100%;  background-color: #3BD1F8;  top: 0;  left: 0;  -webkit-transition-property: transform;  transition-property: transform;  -webkit-transition-duration: 0.3s;  transition-duration: 0.3s;  -webkit-transition-timing-function: ease-out;  transition-timing-function: ease-out;}#transition-demo1:before {  -webkit-transform: scaleY(0);  transform: scaleY(0);}#transition-demo1:hover:before {  -webkit-transform: scaleY(1);  transform: scaleY(1);}#transition-demo2:before {  -webkit-transform: scaleX(0);  transform: scaleX(0);}#transition-demo2:hover:before {  -webkit-transform: scaleX(1);  transform: scaleX(1);}

ボタンは主に、この効果を実現するために before 要素が使用され、ホバリングすると要素のサイズが復元され、X 軸と Y 軸のスケーリングが行われます。 2 つの異なるボタンを実装するための変更

この記事に不備や誤りがある場合は、お気軽にご連絡ください。

参考資料:

MDNCSS トランジション

W3School_CSS トランジション

Ease 関数コレクション