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

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

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

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

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

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

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

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

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

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

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

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

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

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

前述のとおり、hover イベントではtransition 属性を使用しないでください。

HTML

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

CSS

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

マウスがその上に置かれていない場合、ブラウザには次の効果が表示されます

赤色の背景にマウスを置いた場合のブラウザ上の表示効果は次のようになります。

#width: 100px、background-colorを指定p タグ内: red; この場合、幅が 100px の場合、背景は赤になります。トランジション持続時間は以下のように指定されます: 2s;

この場合、トランジションによる効果の開始から終了までの時間は 2 秒です。

最後は、transition-property:width です。transition プロパティを適用した場合の効果は幅のみです。

: ホバーで幅: 420px、背景 - 色: 青を指定すると、マウスを上に移動すると幅が 420px になり、背景が青になります。

マウスがホバーしている場合、幅は 420px になり、背景は青になりますが、トランジション効果は幅のみです。 2秒の変化は幅だけです。トランジション効果は指定した背景色には適用されないため、その上にマウスを置くと背景色が青に変わります。

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