CSS3要素のtransition属性transitionの詳細な紹介

トランジションアニメーションはアニメーションの基礎です

アニメーションのプロパティを学ぶ前に
最初にトランジションプロパティtransition

トランジションtransition

を理解する必要があります

トランジションtransition

最初に小さな例を見てみましょう

<p class="demo"></p>

.demo {    width: 100px;    height: 100px;    background-color: royalblue;}.demo:hover {    width: 200px;}

がデモの上にホバーしていると、あっという間に

幅が200pxになりました

カーソルを要素の上に置いたときに要素の幅をゆっくり広くする方法はありますか
CSS3以前は面倒な

js

script
しか使えませんでしたしかし、目的を達成するには、属性を 1 つ追加するだけです

.demo {    width: 100px;    height: 100px;    background-color: royalblue;    transition: width 1s; /*增*/}.demo:hover {    width: 200px;}

。その機能は、要素の特定のスタイルがいつ変更されるかを指定することです

これらのスタイルは、最終的な属性値に徐々に移行できます

複合属性
• には次のサブプロパティがあります

• transition-property: 遷移または動的シミュレーションのCSSプロパティを指定します

• transition-duration: 遷移に必要な時間を指定します
  transition-timing-function:遷移を指定します
関数

transition-lay: 表示され始める遅延時間を指定します

transition-property どの属性を遷移させたいかを記述する

、または単純にすべての属性を遷移させるキーワードを記述することもできます

all

transition- 継続時間勾配時間属性値は「数値 + s」です

数秒以内の遷移を表します

• transition-timing-function はオプションの属性値であり、次のオプション値があります

  
  

linear
• 線形遷移、ベッセル Er 曲線 (0.0、0.0、1.0、1.0) と同等

  
  

イーズ (デフォルト)
• 滑らかな遷移、ベジェ曲線 (0.25、0.1、0.25、1.0) と同等

  
  

イーズイン
• 低速から高速まで、同等のベジェ曲線 (0.42, 0, 1.0, 1.0)

  
  

イーズアウト
• 高速から低速まで、同等のベジェ曲線 (0, 0, 0.58, 1.0)

  
  

イーズイン-out
• 低速から高速へ、そして再び戻る、ベジェ曲線 (0.42, 0, 0.58, 1.0) に相当

  
  

step-start
• steps(1, start) に相当

  
  step-

  end
• steps(1, end) と同等

  
  steps():

  2 つのパラメーターを持つステップ関数。最初のパラメータは正の
整数
• で、関数のステップ数を指定します。 2 番目のパラメーターの値は start または end で、各ステップの値が変化する時点を指定します。 2 番目のパラメータはオプションであり、デフォルト値は end です。

  
  

cubic-bezier(num, num, num, num):

特定のベジェ曲線タイプ、4 つの値は [0, 1] の範囲内にある必要があります

私たちのほとんどはそれを使用できません一般的に使用されるのは、おそらくデフォルトのイーズと線形遷移です

transition-delay もオプションの属性値です

遷移を遅らせたい場合、つまり遷移前に少し停止したい場合
、この複合属性の最後に「数値 + s」を遅延させる必要がある時間を追加します

この属性は次のようにすることができます複数の異なる属性を設定するために使用されます

必要なのは、それらをカンマで区切ることだけです

.demo {    width: 100px;    height: 100px;    background-color: royalblue;    transition: width 1s linear, 
                height 1s linear,
                background-color 2s 1s; /*改*/}.demo:hover {    width: 200px;    height: 200px;    background-color: lawngreen; /*改*/}

マウスが要素の外に移動すると、要素は元に戻ります

スクリプトの代わりに遷移属性を使用するもう 1 つの理由は、次のとおりです。スクリプトメソッドは複数の要素を変更します スタイルが競合する可能性があります 解決策はbool
変数ロックを使用することですが、これはまだ非常に面倒です 私たちの
transitiontransition

プロパティはそれほど考慮する必要はありません

---

要素は相互に影響しません

もう 1 つ、要素の遷移ではスタイルの特定の開始属性と終了属性を知る必要があることに注意してください。たとえば、この例の幅は明らかに 100px から 200px に遷移しませんでした。トランジション

もちろん、すべてのスタイルをトランジションできるわけではありません
たとえば、<a href="http://www.php.cn/wiki/927%20.html" target="_blank"> display</a>

:block は display:inline-block に遷移します

それは不可能です

次の属性が遷移に参加します

<a href="http://www.php.cn/wiki/927.html" target="_blank">display</a>:block 过渡到 display:inline-block
color

• visibility

• opacity

• vertical-align

• z-index

• クリップ

• 幅/高さ

• 上/下/左/右

• 背景 - 色/位置

• ボーダー-上/下/左/右-色/幅

• 枠線/文字/文字間隔

• フォントサイズ/太さ

• 行の高さ

• マージン/パディング-上/下/左/右

• 最大/最小の高さ/幅

• 輪郭の色/幅

• text-indent/shadow

この属性が本当に非常に強力であることがわかります

以上がCSS3要素のtransition属性transitionの詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。