CSSのtransition属性が機能しない原因と解決方法

CSSのtransitionプロパティを使うと要素が変化する時間を調整し、アニメーションのように表示することができます。トランジション属性は簡単にトランジション効果を実現できますが、場合によっては無効になる場合もあるため、トランジション属性の記述ルールを理解する必要があります。

まず CSS のトランジション属性が機能しない理由を見てみましょう

トランジションは変更時刻などを指定するプロパティを可能にするメソッド。

マウス カーソルをボタンの上に置いたときに色とサイズが変化するタイミングを設定するために使用すると、アニメーションのような効果を得ることができます。

トランジションの形式は次のとおりです。

选择器名称{ 
    transition-property：value; 
    }

指定できる値は次のとおりです。

all: トランジションに適用されるすべてのプロパティを指定できます。

none: プロパティは変更されていません。

属性名: 変換を適用する属性名を指定します。カンマを介して複数指定できます。

トランジションが機能しない理由の多くは、通常、ホバー イベントでのトランジションに関する記述であるため、より注意してください。

アニメーション化されたモーションを実現できるため、一部のエフェクトはトランジション属性を使用して簡単に実装できます。

transition 属性の具体的な使い方を見てみましょう

<p>文字内容</p>
<p>文字内容</p>
<p>文字内容</p>
<p>文字内容</p>
<p>文字内容</p>
<p>文字内容</p>

p {
  width:100px;
  background-color:red;
  transition-duration: 2s;
  transition-property:width;
}
p:hover {
  width:420px;
  background-color:blue;
}

以上がCSSのtransition属性が機能しない原因と解決方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。