CSS3トランジションプロパティ

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

りー

学び続ける

新しいファイル

<!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:5s width cubic-bezier(0.145,1.295,0.000,1.610);} .box:hover{width:500px;} </style> </head> <body> <div class="box"></div> </body> </html>

提出するリセットコード

自動運転