CSS3で要素の遷移効果を実現する方法

CSS3 では、transition 属性を使用して要素のトランジション効果を実現できます。この属性では、属性名、トランジション時間、トランジション速度、トランジションの開始時期を設定できます。構文は「element {transition: 属性名」です。時間速度曲線の遅延}"。

このチュートリアルの動作環境: Windows 10 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

css3 で要素のトランジション効果を実現する方法

transition 属性は省略された属性で、4 つのトランジション プロパティを設定するために使用されます。

• transition-property指定された設定 トランジション効果の CSS プロパティの名前。

• transition-duration は、トランジション効果が完了するまでにかかる秒数またはミリ秒数を指定します。

• transition-timing-function スピードエフェクトのスピードカーブを指定します。

• transition-lay トランジション効果がいつ開始されるかを定義します。

transition: property duration timing-function delay;

    
  
 
请把鼠标指针移动到蓝色的 div 元素上，就可以看到过渡效果。
 
注释：本例在 Internet Explorer 中无效。
  

## (学習ビデオ共有:

)

以上がCSS3で要素の遷移効果を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。