cssのcubic-bezierを簡単に算出してくれる便利サイト

この記事を読んでいるバランスの良い人生を過ごしているみなさんと違って、あらゆる事が非常にバランスの悪い人生を送っている、ユゲタです。 人と同じことをするのが嫌というだけでやりたいことをやらないこともあるし、誰も手を挙げない会議が嫌なために、汚れ役を買うこともしばしば。 他人が当たり前に思っていることを知識として知らなかったり、人が知らないことを知ることに喜びを感じたりと、とにかく昭和47年生まれにも関わらず未だに天の邪鬼な性格が不器用だな〜と感じて入るものの、そんな自分に向き合って日々過ごしています。

cubic-bezierツール

そして、最近ハマりまくっているcss-animationですが、「transition-timing-function」のカスタム要素である「cubic-bezier」ですが、ベジェハンドルを計算して値算出するのが非常にめんどくさい作業で、できれば使いたくないと思っていたのですが、なんとそのピンポイントの値算出を自動計算してくれるツールを公開しているサイトがあったので、そのご紹介です。 https://cubic-bezier.com/

使い方

見た通りのUIで、これ以上の入力フォームもボタンも何もないシンプル構成です。 使い方は、表示されているベジェハンドルをドラッグで動かすだけです。 ベジェハンドルを動かすと、画面上部のcubic-bezier(*,*)の値が変更されて、そのままcssにコピペできるようになっています。

便利なプレビュー

「Go」ボタンをクリックすると、設定したベジェ曲線と、そのすぐ下にあるLibraryの線形でのアニメーションが動きで確認できるようになります。 デフォルトの直線にした状態で、その比較もできるし、近い形の曲線との対比も見た目にわかりやすいので、非常に便利なプレビューですね。 通常のWEB制作やサービス・ツール開発をしていると、ほぼ使用することのない機能ですが、cubic-bezierに関して、これほど「どストレート」な機能提供は無いだろうというツールなので、思わずブックマークしておきました。 他にもこうしたツールが欲しいモノはたくさんありますけどね。

関連サイト

# cubic-bezierについての解説 http://www.knockknock.jp/archives/184