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
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の設定値になっているしゃれたサイトです。
Ceaser
CSS EASING ANIMATION TOOL
http://matthewlein.com/ceaser/
大量のPenner先生のEasingをコンバートしたcubic-bezierのカスタム設定があります。
これだけあれば大丈夫っしょ。
まだまだ足りないって欲張りな人にも、自分で作成するGUIツールも置いてあります。