cman.jp > WEBページ作成TOP > CSSリファレンス > 「トランジションさせるプロパティ」
WEBページ作成
広告
transition-property 「変化対象のCSSプロパティ」
「transition」はアニメーションの１つでCSS3.0で追加されました。
「transition-property」は変化対象とするCSSのプロパティを指定します。
| CSS Ver. | 適用要素 | 継承 |
|---|---|---|
| 3.0 | 全要素 | なし |
広告
transition-propertyの指定方法
| 構文 | |||||
|---|---|---|---|---|---|
|
transition-property : all | none | CSSプロパティ; |
|||||
| プロパティ/設定値 | 意味 | ||||
| transition-property : all | 全てのCSSプロパティを変化の対象とします 指定しない場合は「all」となる |
||||
| transition-property : none | 全てのCSSプロパティを変化の対象外とします transitionを指定していないのと同じ扱い |
||||
| transition-property : cssプロパティ |
複数の変化対象がある場合に、特定のプロパティをtransitionの対象としたい場合に指定します。 下記サンプルでは「width」「background-color」が変化の対象となっていますが、transition-propertyで"width"と指定をした場合は、transition「時間的変化」の対象は「wdith」のみとなります。 （注）transition-propertyで指定されないプロパティは、時間的変化の対象とならいだけで変化は行われます。 |
||||
| デフォルト：「タグ毎のスタイル初期値」を参照 | |||||
transition-property のサンプル
<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-duration | トランジションの再生時間 |
| 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 | アニメーション速度 |
広告