HOME

CSS アニメーションイージング作成(生成)ツール

{ svg, javascript で作成したプログラム一覧 }

推奨 ブラウザ : chrome

ms
js
css

CSS アニメーションの transition で使用する
transition-timing-function : cubic-bezier(0.25,0.25,0.75,0.75);
イージング(トランジッションタイミング)の値を生成するツール作成しました。

また、 javascript でも同じ動きが出来るように値を配列で取得出来るようにしました。
チェックボックスの [ x : y ] 選択で、 x, y の座標を処理して値を出力します。
[x : t ] 選択で、 x, 時間で値を出力します。
[ x : t ] 選択時、座標に 0 より小さい、又は、1 より大きい値があると正しく動作しません。
まだ、怪しい所が沢山あったりしますので修正が必要です。。。_(:3」∠)_
[ x : y ] で座標をプラス、マイナスに大きく振ると要素が行ったり来たりしたりします。
確認した範囲で、この動きは、 CSS では出来ないようです。

あと、[ x : t ] の X は、 y の値だったりします。
なので、要素の外へ、はみ出して、戻るという動きが出来ません。
getCubicBezierCSS() 関数を getCubicBezierCSSX() 関数へ変更すると
要素外への動きが出来ると思います。

数学の勉強をやり直ししてたりします。_´ω`)_