W3C 標準では、CSS3 トランジションを次のように説明しています: 「CSS トランジションにより、CSS 属性値が特定の時間間隔内でスムーズにトランジションできます。この効果は、マウスのクリック、フォーカスの取得、クリックまたはトリガーによって実現されます。要素の変更をスムーズに、アニメーション効果でCSS属性値を変更する「
css3 Transition（CSSトランジション）」アニメーションをより鮮やかでリアルにするCSSトランジションを学びましょう。
どのように機能しますか?
CSS3 トランジション効果を使用すると、要素を 1 つの効果から別の効果に移行できます。これを行うには、2 つのことを指定し、効果の継続時間を指定する必要があります。
例:
.className{
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s ; /* Safari と Chrome */
-o-transition: width 2s; /* Opera */
}
注: アニメーションの遅延時間が指定されていない場合、トランジションはデフォルト値は 0 であるため、効果はありません。
マウスを置くと、変換が開始されます:
.className:hover{width:300px;}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(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中文网(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 つの遷移属性を設定するために使用されます。 3
transition-property トランジションを適用する CSS プロパティの名前を指定します。 3
transition-duration トランジション効果にかかる時間を定義します。デフォルトは 0 です。 3
transition-timing-function トランジション効果のタイムカーブを指定します。デフォルトは「簡単」です。 3
transition-lay トランジション効果の開始時期を指定します。デフォルトは 0 です。 3
りー