ホームページ > 記事 > ウェブフロントエンド > トランジション属性の使い方
トランジション属性の使い方
- 青灯夜游オリジナル
- 2019-01-30 14:44:497215ブラウズ
CSS3 のトランジション属性は、トランジション効果を実現するために使用される省略表現の属性です。トランジション効果に設定する必要がある CSS プロパティ名、完了時間、速度カーブ、開始時間を設定します。
#CSS3 遷移属性
関数: CSS3 遷移属性を設定します。要素番号
##説明:複合属性。オブジェクトが変換されるときの遷移を取得または設定します。 4 つの遷移プロパティ (transition-property、transition-duration、transition-timing-function、transition-delay) を設定するために使用されます。
構文:transition: property duration timing-function delay;
transition-property: トランジション効果を設定する CSS プロパティの名前を指定します。
transition-duration: トランジション効果が完了するまでにかかる秒数またはミリ秒数を指定します。
transition-timing-function: スピードエフェクトのスピードカーブを指定します。
transition-lay: トランジション効果がいつ開始されるかを定義します。
CSS3 トランジション属性の使用例<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:yellow;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}
div:hover
{
width:300px;
}
</style>
</head>
<body>
<div></div>
<p>请把鼠标指针放到黄色的 div 元素上，来查看过渡效果。</p>
<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>
</body>
</html>レンダリング:
上記は以上ですこの記事の内容全体が皆さんの学習に役立つことを願っています。さらにエキサイティングなコンテンツについては、PHP 中国語 Web サイトの関連チュートリアルのコラムに注目してください。 ！ ！
以上がトランジション属性の使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。