アニメーションのイージングカーブ ビューアー
カーブを選んで、オブジェクトの加速と減速を見てみましょう。ライブラリなしで、どのページでも使えるアニメーションのコードを1行コピーできます。
カーブ
方向速く始まり、最後に減速します。
時間の25%、50%、75%のとき、オブジェクトがどこにあるか
document.querySelector(".caja").animate({ transform: ["none", "translateX(300px)"] }, { duration: 800, easing: "linear(0, 0.143, 0.271, 0.386, 0.488, 0.578, 0.657, 0.725, 0.784, 0.834, 0.875, 0.909, 0.936, 0.957, 0.973, 0.984, 0.992, 0.997, 0.999, 1, 1)", fill: "forwards" })使い方のヒント
バナーに入ってくるもの「減速」を使います。速く到達し、なめらかに止まります。
バナーから出ていくもの「加速」を使います。ゆっくり動き出し、速く抜けます。
控えめにバウンドと弾性カーブは目立つので、1つのバナーにつき1要素だけに使いましょう。
ツールについてのよくある質問
ツールは無料ですか？
はい。料金をかけずに、何度でもお使いいただけます。
どのファイルが必要ですか？
確認系のツールでは、HTML5バナーの.zip（メインの.htmlとそのリソース）が必要です。それ以外のツールはファイルを必要としません。
他のツールで作ったバナーにも使えますか？
はい。BannerMotionのバナーだけでなく、どのHTML5バナーも確認できます。
ファイルはどこかに保存されますか？
確認はブラウザ内で行われます。例外として、バナーが外部リソース（たとえばフォント）を読み込む場合、プレビュー表示中にブラウザがそのサイトへ取りに行きます。
アカウントは必要ですか？
いいえ。どのツールもアカウントは不要です。サイズガイドではメールアドレスは任意です。