cman.jp > WEBページ作成TOP > CSSリファレンス > 「トランジションの補間方法」
WEBページ作成
広告
transition-timing-function 「変化の速度」
「transition」はアニメーションの１つでCSS3.0で追加されました。
「transition-timing-function」は変化の速度を指定します。
| CSS Ver. | 適用要素 | 継承 |
|---|---|---|
| 3.0 | 全要素 | なし |
広告
transition-timing-functionの指定方法
| 構文 | |||||
|---|---|---|---|---|---|
|
transition-timing-function : all | none | CSSプロパティ; |
|||||
| プロパティ/設定値 | 意味 | ||||
| transition-timing-function : ease | 開始と終了を滑らかにする | ||||
| transition-timing-function : linear | 一定速度 | ||||
| transition-timing-function : ease-in | 開始をゆっくりにする | ||||
| transition-timing-function : ease-out | 終了をゆっくりにする | ||||
| transition-timing-function : ease-in-out | 開始と終了をゆっくりにする | ||||
| transition-timing-function : step-start | すぐに最終状態にする | ||||
| transition-timing-function : step-end | 変化時間後に最終状態にする | ||||
| transition-timing-function : steps(n, start) | ｎ段階に変化する | ||||
| transition-timing-function : steps(n, end) | ｎ段階に変化する | ||||
| transition-timing-function : cubic-bezier(a, b, c, d) | 変化速度を詳細に指定する 三次ベジェ曲線の軌跡によって変化の進行度を指定 一般には難しいので説明は割愛しています |
||||
| デフォルト：「タグ毎のスタイル初期値」を参照 | |||||
transition-timing-functionの値の違い
ここにカーソルを合わせると変化します
指定なし
ease
linear
ease-in
ease-out
ease-in-out
step-start
step-end
steps(4, start)
steps(4, end)
上記サンプルは、JavaScriptでClassを入れ替えることで変化を発生させています。
transition-timing-functionのサンプル
<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-property | トランジション対象のCSSプロパティ |
| 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 | アニメーション速度 |
広告