cubic-bezier()は、アニメーションの加速と減速を定義するCSSタイミング関数です。4つの値（x1, y1, x2, y2）は、時間を進捗にマッピングする曲線の2つのコントロールポイントです。X軸は時間（0〜1）、Y軸はアニメーションの進捗を表します。
プリセットを選ぶか、キャンバス上のオレンジのコントロールポイントをドラッグしてイージングカーブを形作ります。アニメーションするボールがタイミングの感覚を正確に示し、CSS出力はそのままトランジションやアニメーションに貼り付けられます。
Frequently Asked Questions
Q: CSSのcubic-bezierとは何ですか？
CSSのcubic-bezierとは何ですか？トランジションとアニメーションで使われるタイミング関数で、アニメーションが時間とともに進む速さのカーブを定義します。デフォルトはcubic-bezier(0.25, 0.1, 0.25, 1)で、easeとも呼ばれます。
Q: 標準のイージング値は？
標準のイージング値は？ease = (0.25, 0.1, 0.25, 1)、ease-in = (0.42, 0, 1, 1)、ease-out = (0, 0, 0.58, 1)、ease-in-out = (0.42, 0, 0.58, 1)、linear = (0, 0, 1, 1)。
Q: バウンス効果を作るには？
バウンス効果を作るには？Y値を1を超えてオーバーシュートさせます。例：cubic-bezier(0.34, 1.56, 0.64, 1)。曲線が一時的に目標を超えて戻る、バネのようなバウンスになります。
Q: 負のYでアニメーションが壊れて見えるのはなぜ？
負のYでアニメーションが壊れて見えるのはなぜ？負のYはアンティシペーション（予備動作）を作ります。要素が前進する前に後退するのです。バックイージングでは意図的ですが、通常のコンテンツ遷移には不自然に見えます。
Q: cubic-bezierはアニメーションで使えますか？
cubic-bezierはアニメーションで使えますか？はい。トランジションと@keyframesアニメーションの両方で、timing-functionプロパティとして使えます。スクロール連動アニメーションにも適用されます。
日本の伝統色・和色
和色は平安時代の襲（かさね）の色目に由来する日本の伝統色。桜や山吹、瑠璃など、植物や自然の名前を冠した優しい色合いが特徴で、JIS慣用色名としても制定されています。現代のUIデザインにも落ち着いた配色として人気です。
山吹色 #F8B500山吹の花に由来する黄金色。JIS慣用色名
撫子色 #EEA9A9ナデシコの花の淡いピンク。平安時代から愛される
茜色 #B7282E茜草の根から染めた深い赤。夕焼けの色
若草色 #C3D825春の新芽を思わせる明るい黄緑
瑠璃色 #1E50A2仏教の七宝「瑠璃」に由来する深い青
桜色 #FEF4F4桜の花びらのようなごく淡いピンク
常磐色 #007B43常緑樹の深い緑。永遠を象徴する
Q: 和色とは何ですか？
和色とは何ですか？和色は平安時代の襲の色目に由来する日本の伝統色で、桜・山吹・瑠璃など自然の名を冠した色が多く、JIS慣用色名として269色が制定されています。
Q: 山吹色はどんな色ですか？
山吹色はどんな色ですか？山吹の花に由来する黄金色で、色値は #F8B500。JIS慣用色名の一つで、太田道灌の逸話でも知られる日本の代表色です。