ホームページへ|
目次へ |
上へ |
前のページへ
グラデーション，トランジション，アニメーション，変形
このページのスタイルに関する例は，CSS3 in Styleにあるそれぞれの紹介ページ（Overviewのところ）の「demo」を参考にして下さい．
透明度とグラデーション
透明度の設定
| プロパティ | 値 | 意味 |
|---|
| opacity | 数値（0.0〜1.0） | 透明度を設定します．透明（0.0）〜不透明（1.0） |
グラデーションの設定
画像を扱えるプロパティに以下の値を設定することで，グラデーション効果を表現できます．
線形のグラデーション
| 値 | パラメーター | 意味 |
|---|
| linear-gradient(A B, C D, E F) | A B | A（始点）：グラデーションの始点を(top,bottom,left,right)の組み合わせで設定 |
| B（角度）：グラデーションの方向を右（０度）から反時計回りの角度で設定 |
| C D | C（開始色）：グラデーションを始める色を設定 |
| D（位置）：グラデーションの開始位置を（数値＋単位）か（数値＋％）で設定 |
| E F | E(終了色)：グラデーションを終わる色を設定 |
| F（位置）：グラデーションの終了位置を（数値＋単位）か（数値＋％）で設定 |
この設定は，いまのところブラウザによって設定方法が異なります．
FireFoxの場合
| 値 | パラメーター | 意味 |
|---|
| -moz-linear-gradient(A B, C D, E F) | A B | A（始点）：グラデーションの始点を(数値＋単位,数値％,top,bottom,center,left,right)の組み合わせで設定 |
| B（角度）：グラデーションの方向を右（０度）から反時計回りの角度で設定 |
| C D | C（開始色）：グラデーションを始める色を設定 |
| D（位置）：グラデーションの開始位置を（数値＋単位）か（数値＋％）で設定 |
| E F | E(終了色)：グラデーションを終わる色を設定 |
| F（位置）：グラデーションの終了位置を（数値＋単位）か（数値＋％）で設定 |
Chrome, Safariの場合
| 値 | パラメーター | 意味 |
|---|
| -webkit-gradient(linear, A, B, from(C), to(D)) | A | グラデーションの始点を(数値＋単位,数値％,top,bottom,center,left,right)の組み合わせで設定 |
| B | グラデーションの終点を(数値＋単位,数値％,top,bottom,center,left,right)の組み合わせで設定 |
| from(C) | C（開始色）：グラデーションを始める色を設定 |
| to(D) | D（終了色)：グラデーションを終わる色を設定 |
放射状のグラデーション
| 値 | パラメーター | 意味 |
|---|
| radial-gradient(A, B C, D E, F G) | A | グラデーションの始点となる円の中心を(数値＋単位,数値％,top,bottom,center,left,right)の組み合わせで設定 |
| B C | B（形状）：グラデーションの形状（circle, ellipse）を設定 |
| C（サイズ）：形状のサイズを（closest-side, closest-corner, farthest-side, farthest-corner, contain, cover）から選択 |
| D E | D（開始色）：グラデーションを始める色を設定 |
| E（位置）：グラデーションの開始位置を（数値＋単位）か（数値＋％）で設定 |
| F G | F(終了色)：グラデーションを終わる色を設定 |
| G（位置）：グラデーションの終了位置を（数値＋単位）か（数値＋％）で設定 |
FireFoxの場合は「値」を「-moz-radial-gradient」とするだけです．
Chrome, Safariの場合
| 値 | パラメーター | 意味 |
|---|
| -webkit-gradient(radial, A, B, C, D, from(E), to(F)) | A | グラデーションの始点となる円の中心を(数値,数値％,top,bottom,center,left,right)の組み合わせで設定 |
| B | グラデーションの開始位置の半径を（数値）で設定 |
| C | グラデーションの終点となる円の半径を(数値,数値％,top,bottom,center,left,right)の組み合わせで設定 |
| D | グラデーションの終了位置の半径を（数値）で設定 |
| from(E) | E（開始色）：グラデーションを始める色を設定 |
| to(F) | F（終了色)：グラデーションを終わる色を設定 |
トランジション
トランジションとはスタイルを別のスタイルへ連続的に変化させる効果です．
Safariで使用する場合は，プロパティ名を，先頭に「-webkit-」を付けたものにします．
トランジション効果を設定
| プロパティ | 値 | 意味 |
|---|
| transition-property | none | 変化するプロパティなし |
| all | トランジションを適用できる全てのプロパティを変化させる． |
| プロパティ名 | 変化させるプロパティの名前を指定．複数ある場合はカンマで区切る． |
トランジション時間を設定
| プロパティ | 値 | 意味 |
|---|
| transition-duration | 秒(s)，ミリ秒(ms) | 変化にかける時間を設定．複数に異なる時間を設定する場合はカンマで区切る． |
トランジションの変化速度を設定
| プロパティ | 値 | 意味 |
|---|
| transition-timing-function | ease | 初速有りで加速して始まり，終速０に減速して終わる． |
| linear | 等速で変化 |
| ease-in | 初速０から加速し，終速有りで終わる． |
| ease-out | 初速有りで始まり，終速０に減速する． |
| ease-in-out | 初速０から加速して始まり，終速０に減速して終わる． |
| step-start | 最初に変化 |
| step-end | 最後に変化 |
| steps(ステップ数, start | end ) | 変化するステップ数と変化するタイミング「ステップの最初(start)か最後(end)」を設定 |
| cubic-bezier(x1, y1, x2, y2) | 変化する速度をベジエ曲線で設定 |
トランジションを遅らせる設定
| プロパティ | 値 | 意味 |
|---|
| transition-delay | 秒(s)，ミリ秒(ms) | 変化の始まるまでの時間を設定． |
トランジションをまとめて設定
| プロパティ | 値 |
|---|
| transition | (transition-property) (transition-duration) (transition-delay) (transition-timing-function) |
アニメーション
トランジションと同様にスタイルを変化っさせる効果ですが，「キーフレーム」を設定することで，途中の変化を細かく設定できます．
Safariで使用する場合は，プロパティ名を，先頭に「-webkit-」を付けたものに，FIreFoxで使用する場合は「-moz-」を付けたものにします．
キーフレームの設定
次のように，キーフレームに名前を付けて設定します．キーフレームの内容は，スタイルの変化の仕方を，アニメーションの時間に対するパーセントで指定し，最初は「0%」または「from」終わりは，「100%」または「end」で指定します．
@keyframes (キーフレーム名) {
0%(from) {
プロパティ:値;
プロパティ:値;
...
}
*% {
プロパティ:値;
プロパティ:値;
...
}
..........
100%(end) {
プロパティ:値;
プロパティ:値;
...
}
}
使用するキーフレームの設定
| プロパティ | 値 | 意味 |
|---|
| animation-name | none | アニメーションを実行しない． |
| （キーフレーム名） | で設定したキーフレーム名を設定．複数実行する場合は，カンマで区切る． |
実行時間の設定
| プロパティ | 値 | 意味 |
|---|
| animation-duration | 秒(s)，ミリ秒(ms) | アニメーションが終了するまでの時間を設定．複数に異なる時間を設定する場合はカンマで区切る． |
アニメーション速度の変化を設定
@keyframesで設定したキーフレームの中に設定します．
| プロパティ | 値 | 意味 |
|---|
| animation-timing-function | ease | 初速有りで加速して始まり，終速０に減速して終わる． |
| linear | 等速で変化 |
| ease-in | 初速０から加速し，終速有りで終わる． |
| ease-out | 初速有りで始まり，終速０に減速する． |
| ease-in-out | 初速０から加速して始まり，終速０に減速して終わる． |
| step-start | 最初に変化 |
| step-end | 最後に変化 |
| steps(ステップ数, start | end ) | 変化するステップ数と変化するタイミング「ステップの最初(start)か最後(end)」を設定 |
| cubic-bezier(x1, y1, x2, y2) | 変化する速度をベジエ曲線で設定 |
実行回数の設定
| プロパティ | 値 | 意味 |
|---|
| animation-iteration-count | infinite | 無限に繰り返す． |
| 数値 | 設定した回数繰り返す． |
繰り返し方向を設定
| プロパティ | 値 | 意味 |
|---|
| animation-direction | nomal | 通常の方法で繰り返す． |
| reverse | 逆方向に繰り返す． |
| alternate | 奇数回目は通常の方法で，偶数回目は逆方向に繰り返す． |
| alternate-reverse | 偶数回目は通常の方法で，奇数回目は逆方向に繰り返す． |
開始時間の設定
| プロパティ | 値 | 意味 |
|---|
| animation-delay | 秒(s)，ミリ秒(ms) | アニメーションの始まるまでの時間を設定． |
アニメーションをまとめて設定
| プロパティ | 値 |
|---|
| animation | (animation-name) (animation-duration) (animation-timing-function) (transition-delay) (animation-iteration-count) (animation-direction) |
変形
設定した要素のボックスに変形効果を適用します．
プロパティ名を，Safariで使用する場合は先頭に「-webkit-」を，FireFoxで使用する場合は「-moz-」を，IEで使用する場合は「-ms-」を付けたものにします．
変形効果を設定
| プロパティ | 値 | 意味 |
|---|
| transform | translate(横方向の移動距離,縦方向の移動距離) | 「数値＋単位」か「数値＋％」で各方向の移動距離を設定 |
| translateX(横方向の移動距離) | 「数値＋単位」か「数値＋％」で移動距離を設定 |
| translateY(縦方向の移動距離) | 「数値＋単位」か「数値＋％」で移動距離を設定 |
| scale(横方向の倍率,縦方向の倍率) | 各方向への拡大，縮小倍率を「数値」で設定 |
| scaleX(横方向の倍率) | 拡大，縮小倍率を「数値」で設定 |
| scaleY(縦方向の倍率) | 拡大，縮小倍率を「数値」で設定 |
| rotate(角度) | 回転角度を「deg」か「rad」か「grad」で設定 |
| skew(横方向の角度,縦方向の角度) | 縦横に傾斜させる角度を設定 |
| skewX(横方向の角度) | 横に傾斜させる角度を設定 |
| skewY(縦方向の角度) | 縦に傾斜させる角度を設定 |
変形の起点を設定
| プロパティ | 値 | 意味 |
|---|
| transform-origin | 数値＋％ | 基点の位置を割合で指定 |
| 数値＋単位 | 基点の位置を数値で指定 |
| (left, center, right) (top, center, bottom) | 基点を横方向と縦方向の位置の組合せで指定 |
ホームページへ |
目次へ |
上へ |
このページの最初に戻る |
前のページへ