css3 トランジション プロパティには、1. トランジション、2. トランジション プロパティ、3. トランジション期間、4. トランジション タイミング関数、5. トランジション遅延の 5 種類があります。
このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。
CSS トランジションを使用すると、一定期間にわたってプロパティ値をスムーズに変更できます。
css3 トランジション属性には 5 つのタイプがあります:
Attribute | Description | CSS |
---|---|---|
transition | 省略属性。1 つの属性に 4 つのトランジション属性を設定するために使用されます。 | 3 |
transition-property | トランジションを適用する CSS プロパティの名前を指定します。 | 3 |
transition-duration | トランジション効果にかかる時間を定義します。デフォルトは 0 です。 | 3 |
transition-timing-function | トランジション効果の時間曲線を指定します。デフォルトは「簡単」です。 | 3 |
transition-lay | トランジション効果がいつ開始されるかを指定します。デフォルトは 0 です。 | 3 |
CSS3 トランジションは、要素があるスタイルから別のスタイルに徐々に変化する効果です。
これを実現するには、2 つのことを指定する必要があります。
効果を追加する CSS プロパティを指定します。
効果持続時間。
例:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> div { width:100px; height:100px; background:red; transition-property:width; transition-duration:1s; transition-timing-function:linear; transition-delay:2s; /* Safari */ -webkit-transition-property:width; -webkit-transition-duration:1s; -webkit-transition-timing-function:linear; -webkit-transition-delay:2s; } div:hover { width:200px; } </style> </head> <body> <div></div> <p>鼠标移动到 div 元素上,查看过渡效果。</p> <p><b>注意:</b> 过渡效果需要等待两秒后才开始。</p> </body> </html>
(学習ビデオ共有: css ビデオ チュートリアル、Web フロント-終わり ###)###
以上がcss3のトランジションプロパティは何種類あるのでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。