CSS辞典 transition-durationプロパティ解説
トランジションが完了するまでの時間を指定する「transition-durationプロパティ」の使用方法を記載
対応バージョン：CSS3／2.1
対応ブラウザ
| 初期値 | 0s |
| 適用される要素 | すべての要素（::before疑似要素、::after疑似要素を含む） |
| モジュール | CSS Transitions |
| 継承 | なし |
概要・使用方法
{ transition-property: プロパティ名;}「transition-durationプロパティ」は、適用したトランジションが完了するまでの時間を指定します。指定した時間内で徐々に変化が進行します。初期値は0です、即時に完了します。
指定できる値（プロパティ名）
| 数値+単位 | 「2s」のように数値+単位で指定します。使用できる単位はs（秒）、ms（秒）が付かれます。カンマ（,）で区切って複数指定可能です。 また、マイナスの値は0と見なされます。 |
サンプルコード
div要素にマウスオーバーしたときに背景色がグレイから赤に変更され、幅がゆっくり縮みボックスの高さがでるアニメーションとなります。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>transition-durationプロパティCSSフォントサンプルページ</title>
<meta charset="uft-8">
<style>
.duration-btn{
width:400px;
height:30px;
text-align:center;
background-color:silver;
transition-property: all;
transition-duration: 5s;
}
.duration-btn:hover{
background-color:red;
width:200px;
height:100px;
}
</style>
</head>
<body>
<div class="duration-btn">transition-duration</div>
</body>
</html>実行結果
transition-duration