ホームページ >ウェブフロントエンド >フロントエンドQ&A >css3のトランジションプロパティは何種類あるのでしょうか？
css3のトランジションプロパティは何種類あるのでしょうか？
- 青灯夜游オリジナル
- 2022-03-18 16:58:163224ブラウズ
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 サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。