CSS3 -webkit-transition_html/css_WEB-ITnose

トランジション (プロパティ グラデーション): "CSS トランジションにより、CSS 値のプロパティ変更が指定された期間にわたってスムーズに発生します。"

トランジション - W3C でのトランジションの説明: "CSS トランジションにより、CSS が可能になります。属性値は特定の時間間隔内で滑らかに遷移します。この効果は、マウスのクリック、フォーカス、クリック、または要素への任意の変更によってトリガーされ、アニメーション効果で CSS 属性値を滑らかに変更します。 : CSS プロパティ (none|all|property) 継続時間関数 遅延時間

CSS プロパティ (transition-property)

要素が広くなった場合の幅など、変更される属性、テキストの色が変化するときの色、W3C は変換可能な属性のリストを提供します。上記の属性に加えて、ズームインとズームアウト、回転、ベベル、グラデーションなど、CSS3 で機能する CSS3 変形もあります。 value には、上記の表のすべての属性を表す強力な「all」値もあります。

Duration (transition-duration)

アニメーションの実行時間 (秒単位)。 0.1 秒は、「0.1s」または「.1s」と記述できます。

時間関数 (transition-timing-function): <.>イーズ: 徐々に遅くなる 線形: 線形遷移 イーズイン: 低速から高速へ イーズアウト: 高速から低速へ イーズインアウト: 低速から高速から低速へ 三次ベジェ: 特定の三次ベジェ曲線、すべて値は [0, 1] の範囲内にある必要があります。それ以外の場合は無効です。

遅延時間 (transition-lay) アクションと変換の開始の間の待機時間、通常は秒単位で表されます (たとえば、.1 秒)。

例: すべての要素の属性変更をスムーズに遷移させます。 ホバー状態。ボタンをクリックまたはクリックするとボックスの属性が変わります。

CSS3 アニメーションの位置を定義します: CSS 疑似クラスと JS イベント

* {  -webkit-transition: all 1s;}

: リンク 未訪問リンク: 訪問済み 訪問済みのリンク :hover マウス hover: アクティブなマウスクリック: 選択されたフォーカス要素

#timings-demo:hover .box {      background: #636;       -webkit-transition: all 2s ease-out 0s;  }