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

CSS3のtransition-duration属性の詳細説明:
この属性は、アニメーションの遷移時間を設定するために使用されます。詳細については、「CSS3のtransition属性の詳細な説明」の章を参照してください。
文法構造:

transition-duration：<time>[ ,<time> ]*

パラメータ分析:
<time>: トランジション効果の時間を設定します。
特記事項:
1. 複数のプロパティを設定する場合は、transition-property で設定されたtransition プロパティと 1 対 1 で対応する必要があります。
2. 対応するスクリプト機能はtransitionDurationです。
コード例:
例 1:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="//m.sbmmt.com/" />
<title>php中文网</title>
<style>
#thediv{
  width:100px;
  height:100px;
  background:blue;
   
  transition-property:width,height;
  -moz-transition-property:width,height;
  -webkit-transition-property:width,height;
  -o-transition-property:width,height;
   
  transition-duration:2s;
  -moz-transition-duration:2s;
  -webkit-transition-duration:2s;
  -o-transition-duration:2s;
}
#thediv:hover{
  width:500px;
  height:200px;
}
</style>
</head>
<body>
<div id="thediv"></div>
</body>
</html>

上記のコードは、トランジション時間を 2 秒に設定できます。これは、幅と高さのトランジション効果が 2 秒以内に完了することを意味します。
例 2:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="//m.sbmmt.com/" />
<title>php中文网</title>
<style>
#thediv{
  width:100px;
  height:100px;
  background:blue;
   
  transition-property:width,height;
  -moz-transition-property:width,height;
  -webkit-transition-property:width,height;
  -o-transition-property:width,height;
   
  transition-duration:2s,6s;
  -moz-transition-duration:2s,6s;
  -webkit-transition-duration:2s,6s;
  -o-transition-duration:2s,6s;
}
#thediv:hover{
  width:500px;
  height:200px;
}
</style>
</head>
<body>
<div id="thediv"></div>
</body>
</html>

上記のコードは、幅のアニメーションが 2 秒以内に完了するように設定し、高さのアニメーションが 5 秒以内に完了するように設定します。

学び続ける

新しいファイル

<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="//m.sbmmt.com/" /> <title>php中文网</title> <style> #thediv{ width:100px; height:100px; background:blue; transition-property:width,height; -moz-transition-property:width,height; -webkit-transition-property:width,height; -o-transition-property:width,height; transition-duration:2s,6s; -moz-transition-duration:2s,6s; -webkit-transition-duration:2s,6s; -o-transition-duration:2s,6s; } #thediv:hover{ width:500px; height:200px; } </style> </head> <body> <div id="thediv"></div> </body> </html>

リセットコード

自動運転

提出する

プレビュー Clear