cman.jp > WEBページ作成TOP > CSSリファレンス > 「トランジションの設定」
WEBページ作成
広告
transition 「時間的変化」
「transition」は時間や速度を指定したCSSプロパティの値を変化させる事が出来ます。
アニメーションの1つで、カーソルイン（:hover）のタイミングで変化を与えたりします。
| CSS Ver. | 適用要素 | 継承 |
|---|---|---|
| 3.0 | 全要素 | なし |
広告
transitionの指定方法
「transition」は「transition-property」「transition-duration」「transition-timing-function」「transition-delay」をまとめて指定するショートハンド（複数のプロパティをまとめて指定）です。
| 構文 | |||||
|---|---|---|---|---|---|
|
transition : [変化対象CSS] [変化時間] [変化速度] [変化開始時間]; |
|||||
| プロパティ/設定値 | 意味 | ||||
| 変化対象CSS | transition-propertyの値を設定 指定しない場合は「all」となる |
||||
| 変化時間 | transition-durationの値を設定 指定しない場合は「0s」となる |
||||
| 変化速度 | transition-timing-functionの値を設定 指定しない場合は「ease」となる |
||||
| 変化開始時間 | transition-delayの値を設定 指定しない場合は「0s」となる |
||||
| 複数指定する場合は、カンマで区切ります。 | |||||
transition のサンプル
<style type="text/css">
/* --- サンプル用の共通枠 --------------------------- */
.sampleDiv {
display : table;
border-collapse : separate;
border-spacing : 3px 0;
}
.sampleDiv div {
display : table-cell;
width : 80px;
height : 40px;
text-align : center;
vertical-align : middle;
font-weight : bolder;
}
/* --- (1) 背景色のみゆっくり変化 ------------------- */
.s1{
color : red;
background-color : blue;
transition : background-color 1s ease-in-out 0s;
}
.s1:hover {
color : white;
background-color : red;
}
/* --- (2) 背景色が変化後に文字色変化 --------------- */
.s2{
color : red;
background-color : blue;
transition : background-color 1s ease-in-out 0s , color 1s ease 1.5s;
}
.s2:hover {
color : white;
background-color : red;
}
/* --- (3) 省略（背景色・文字色共にゆっくり変化） --- */
.s3{
color : red;
background-color : blue;
transition : 2s;
}
.s3:hover {
color : white;
background-color : red;
}
</style>
<!-- html -->
<div class="sampleDiv">
<div class="s1">(1)ABC</div>
<div class="s2">(2)ABC</div>
<div class="s3">(3)ABC</div>
</div>
(1)ABC
(2)ABC
(3)ABC
transition の自由に指定できるサンプル
<style type="text/css">
.s9{
width : 50px;
height : 40px;
background-color : blue;
transition : 下記のセレクトボックスで指定
}
.s9:hover {
width : 280px;
background-color : red;
}
</style>
<!-- html -->
<div class="s9" id="moveSample1">ABC</div>
| transitionプロパティ | 設定値 |
|---|---|
| transition-property | |
| transition-duration | |
| transition-timing-function | |
| transition-delay | |
| 指定した値のtaransition構文 | |
| transition指定なし | |
↓マウスを合わせると、指定条件で変化します。
ABC
| 関連するCSS(STYLE) | |
|---|---|
| transition-delay | トランジションのディレイ |
| transition-duration | トランジションの再生時間 |
| 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 | アニメーション速度 |
広告