css3トランジションの使用attribute_html/css_WEB-ITnose

トランジションは、アニメーション効果を実現するために、指定された時間内に属性を 1 つの属性値から別の属性値にスムーズに移行することです。
この属性は通常、次の方法で使用されます。

例を見てみましょう: マウスオーバー オンdiv、0.2 秒後、div 要素の背景色は 1 秒後に黄色に変わります。変更方法は直線的です

1 div{ background-color:red; transition:background-color 1s linear 0.2s;}2 div:hover{ background-color:yellow;}

<div>思思博士</div>

マウスを置く前:

マウスの 0.2 秒後変更プロセス:

マウスを置くことによる最終的な効果:

ここでこの属性の使用法を参照すると、良いアイデアが得られるはずです

この属性について、各パラメーターには対応する属性名。これは、この属性を分割して書き込むことができることを意味します。

非省略形式:

1 /*div{ background-color:red; transition:background-color 1s linear 0.2s;}*/2 div{background-color:red; transition-property:background-color; transition-duration:1s; transition-timing-function:linear; transition-delay:0.2s}3 div:hover{ background-color:yellow;}