イナヅマTVログ

cubic-bezier

CSS3, transition-timing-function: cubic-besierの4つの引数

| 0件のコメント

CSS3でアニメーションするための方法のひとつ、transition。
easing は transition-timing-function プロパティに設定します。

以下の5種類が定義されています。
ease, linear, ease-in, ease-out, ease-in-out。

イージングのかかり具合が気になったのでGoogle先生にお聞きすると丁寧に説明してくれてるサイトが色々見つかりました。

roblaplaca.com

roblaplaca.com: Understanding CSS cubic-bezier

cubic-bezier(P1x,P1y,P2x,P2y)

カスタム timing-function の設定値を試せます。
roblaplaca.com: CSS cubic-bezier Builder

www.netzgesta.de

www.netzgesta.de: Cubic Bezier timing function compatible with -webkit-transition-timing-function

コチラには以下の説明がありました。

The timing function is specified using a cubic Bezier curve, which is defined by four control points. The first and last control points are always set to (0,0) and (1,1), so you just need to specify the two in-between control points. The points are specified as a percentage of the overall duration (percentage: interpolated as a real number between 0 and 1). The timing function takes as its input the current elapsed percentage of the transition duration and outputs a percentage that determines how close the transition is to its goal state.

cubic-besier が timing function の元になってて、引数でイージングを変えられる…らしい。
分かりやすいGUIツールも作成してくれていました。
このツールを参考に値をメモ。

linear: 0.0, 0.0, 1.0, 1.0
default(ease): 0.25, 0.1, 0.25, 1.0
ease-in: 0.42, 0.0, 1.0, 1.0
ease-out: 0.0, 0.0, 0.58, 1.0
ease-in-out: 0.42, 0.0, 0.58, 1.0

Cubic Bezier

developer.apple.com

Apple: Safari Developer Libraryにも説明があった。
Safari CSS Visual Effects Guide
Safari CSS Reference

Availability
Available in Safari 3.1 and later.
Available in iOS 2.0 and later.

なるほど、iOS 2から使えるのか…

W3C

The ‘transition-timing-function’ Property
ここに全部書いてあった。

custom timing-function

規定値以外のtiming-functionをcubic-bezierを使って設定するのは大変です。
でもネットの世界のステキな方がツールを作ってくれているので、助かります。

cubic-bezier.com

http://cubic-bezier.com/#.17,.67,.83,.67

URLハッシュがcubic-bezierの設定値になっているしゃれたサイトです。
cubic-bezier

Ceaser

CSS EASING ANIMATION TOOL

http://matthewlein.com/ceaser/

大量のPenner先生のEasingをコンバートしたcubic-bezierのカスタム設定があります。
これだけあれば大丈夫っしょ。
まだまだ足りないって欲張りな人にも、自分で作成するGUIツールも置いてあります。

ceaser

コメントを残す

必須欄は * がついています


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください