CSS3トランジションプロパティ
W3C 標(biāo)準(zhǔn)では、CSS3 トランジションを次のように説明しています: 「CSS トランジションにより、CSS 屬性値が特定の時(shí)間間隔內(nèi)でスムーズにトランジションできます。この効果は、マウスのクリック、フォーカスの取得、クリックまたはトリガーによって実現(xiàn)されます。要素の変更をスムーズに、アニメーション効果でCSS屬性値を変更する「
css3 Transition（CSSトランジション）」アニメーションをより鮮やかでリアルにするCSSトランジションを?qū)Wびましょう。
どのように機(jī)能しますか?
CSS3 トランジション効果を使用すると、要素を 1 つの効果から別の効果に移行できます。これを行うには、2 つのことを指定し、効果の継続時(shí)間を指定する必要があります。
例:
.className{
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s ; /* Safari と Chrome */
-o-transition: width 2s; /* Opera */
}
注: アニメーションの遅延時(shí)間が指定されていない場(chǎng)合、トランジションはデフォルト値は 0 であるため、効果はありません。
マウスを置くと、変換が開(kāi)始されます:
.className:hover{width:300px;}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style type="text/css">
body{background:#eee;}
*{margin:0; padding:0; font-family:Arial,"微軟雅黑"; cursor:default;}
.wrap{margin:100px;}
.wrap{transition:background 0.5s ease-in-out; width:100px; height:100px; background:#92B901; border-radius:5px;}
.wrap:hover{background:#FFC631;}
</style>
</head>
<body>
<div class="wrap"></div>
</body>
</html> スタイル変更
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style type="text/css">
.box{width:100px;height:100px;background:red;
transition:1s width,2s height,3s background;}
.box:hover{width:500px;height:300px;background:blue;}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>トランジション屬性
リスト入り以下の表のすべての遷移屬性:
屬性 説明の
transition 短縮屬性。1 つの屬性に 4 つの遷移屬性を設(shè)定するために使用されます。 3
transition-property トランジションを適用する CSS プロパティの名前を指定します。 3
transition-duration トランジション効果にかかる時(shí)間を定義します。デフォルトは 0 です。 3
transition-timing-function トランジション効果のタイムカーブを指定します。デフォルトは「簡(jiǎn)単」です。 3
transition-lay トランジション効果の開(kāi)始時(shí)期を指定します。デフォルトは 0 です。 3
りー
