原森情報技術研究所 WEBコンテンツ企画・制作・運営・サポート / 兵庫県 神戸市 明石市 /

transition-timing-function

transition-timing-function をならべてみた実験

transition設定のサンプル

Transition
ease
linear
ease-in
ease-out
ease-in-out
step-start
step-end
steps(4,start)
steps(4,end)

Transitonボタンにマウスホバー
[ 1s ]で長さ変化 / count:0

1s 2s 3s 4s 5s ←秒変更1s


サンプル例の内容

【例】 Transitionボタンにマウスホバーで青いdiv(width:30px)がそれぞれ
transition:all 1s(~5s) 各timing-function で width:300px(※ウインドウサイズにより150px) に変化するサンプル。上から順に、
ease : 開始時急加速、中盤から緩やかに変化。
linear : 初期状態から最終状態へ規則的に、一定の速度で変化。
ease-in : 開始時は緩やか、だんだん加速し、最後は突然停止。
ease-out : easeより急加速で開始、最後の方は緩やか。
ease-in-out : 緩やかに開始、最後も緩やかになる。開始時 ease-in 、完了時 ease-out に似る。
step-start : すぐに最終状態になり、完了までそのまま。steps(1, start)と同じ。
step-end : 完了するまで初期状態。最後に最終状態になる。steps(1, end)と同じ。
steps(4,start) : 開始時に最初のステップが発生。例では4コマ
steps(4,end) : 完了時に最後のステップが発生。例では4コマ

※ 秒数変更ボタンをクリックすると、transitionの秒数を変更します。
※ timing-functionのチェックを外すとBOXを非表示にしますので、easeとlinerだけを比較する、などで動作の確認ができるようにしています。

※ countは目安程度につけた、ホバー時間をカウントするだけの適当なものです。

transitionのプロパティ

transition-property CLICK
transition-duration CLICK
transition-timing-function CLICK
変化のタイミング・進行割合を指定
3次ベジェ曲線で変化を設定。開始点Aと終了点Dは決まってるので、Aからの接線ポイントBやDからの接線ポイントCを指定。
A,B,C,D は それぞれA(xa,ya)=A(0,0), D(xd,yd)=D(1.0,1.0)は省略で、
BとCの座標をcubic-bezier(xb,yb,xc,yc)で指定する。
変化量は文字でも可能。
ease = cubic-bezier(0.25, 0.1, 0.25, 1.0) (初期値)
linear = cubic-bezier(0.0, 0.0, 1.0, 1.0)
ease-in = cubic-bezier(0.42, 0, 1.0, 1.0)
ease-out = cubic-bezier(0, 0, 0.58, 1.0)
ease-in-out = cubic-bezier(0.42, 0, 0.58, 1.0)
transition-delay CLICK

ページトップへ

top > css3研究 > 
-timing-function

Text

color

font font-size font-size-adjust font-stretch font-weight

letter-spacing

line-height

max-lines

text-decoration-color text-emphasis-color text-indent text-shadow text-size-adjust

vertical-align

word-spacing

Box

background background-color background-image background-position background-size

border border-color border-top-color border-radius border-top-right-radius border-spacing border-top border-width border-top-width

box-shadow

clip

height min-height max-height

margin margin-top

opacity

outline-color outline-offset outline-width

padding padding-top

width min-width max-width

Positioning

top

right

bottom

left

offset-before offset-end offset-after offset-start

visibility

z-index

zoom

Multi-column layout

columns column-count column-gap column-rule column-rule-color column-rule-width column-width

Flexbox

flex flex-grow flex-shrink flex-basis

order

Transforms

perspective

perspective-origin

transform

transform-origin

SVG

fill fill-opacity

flood-color

lighting-color

marker-offset

stop-color stop-opacity

stroke stroke-dasharray stroke-dashoffset stroke-miterlimit stroke-opacity stroke-width

viewport-fill viewport-fill-opacity

カテゴリMENU
お問い合せ