cman.jp > WEBページ作成TOP > CSSリファレンス > 「トランジションの再生時間」
WEBページ作成
広告
transition-duration 「変化の時間」
「transition」はアニメーションの１つでCSS3.0で追加されました。
「transition-duration」は変化の時間を指定します。
| CSS Ver. | 適用要素 | 継承 |
|---|---|---|
| 3.0 | 全要素 | なし |
広告
transition-durationの指定方法
| 構文 | |||||
|---|---|---|---|---|---|
|
transition-duration : 秒数; |
|||||
| プロパティ/設定値 | 意味 | ||||
| transition-duration : 秒数 | 変化の時間（開始してから終了するまで）の時間 形式：1s（小数指定も可能） 指定しない場合は「0s」となる |
||||
| デフォルト：「タグ毎のスタイル初期値」を参照 | |||||
transition-duration のサンプル
<style type="text/css">
.s1{
width : 50px;
height : 40px;
background-color : blue;
transition-property : 下記のセレクトボックスで指定
transition-duration : 下記のセレクトボックスで指定
transition-timing-function : 下記のセレクトボックスで指定
transition-delay : 下記のセレクトボックスで指定
}
/* このサンプルは「width」「background-color」を変化対象としています */
/* マウスを合わせると変化します */
.s1:hover {
width : 280px;
background-color : red;
}
</style>
<!-- html -->
<div class="s1" id="moveSample1">ABC</div>
| transitionプロパティ | 設定値 |
|---|---|
| 変化対象のCSS transition-property |
|
| 変化の時間 transition-duration |
|
| 変化の速度 transition-timing-function |
|
| 変化開始までの時間 transition-delay |
|
| 指定した値のtaransition構文 | |
| transition指定なし | |
↓マウスを合わせると、指定条件で変化します。
ABC
| 関連するCSS(STYLE) | |
|---|---|
| transition | トランジションの設定 |
| transition-delay | トランジションのディレイ |
| transition-property | トランジション対象のCSSプロパティ |
| transition-timing-function | トランジションの速度 |
| animation | アニメーションの設定 |
| animation-fill-mode | アニメーションの再生前後のスタイル |
| animation-play-state | アニメーションの再生と一時停止 |
| backface-visibility | 裏面の表示 |
| perspective | 子要素の奥行きの指定 |
| perspective-origin | 子要素の奥行きのx軸・y軸方向の位置 |
| animation-delay | アニメーションのディレイ |
| animation-direction | アニメーションの方向 |
| animation-duration | アニメーションの再生時間 |
| animation-iteration-count | アニメーションの繰り返し |
| animation-name | アニメーションのキーフレーム名 |
| animation-timing-function | アニメーション速度 |
広告