自作ホームページの奨め

有限会社安房ネット

cssアニメーション・タイミングファンクション

cssによるアニメーションの変化のタイミングを指定します。
このページのアニメーションは、4秒間で、幅0から、幅100%に広がり、 その後1秒間停止するようにしています。
枠内は、animation-timing-function プロパティの値です。

cubic-bezier(x1, y1, x2, y2)
[0.0, 0.0] から始まり、[x1, y1], [x2, y2] を経由して
[1.0, 1.0] に到達する三次ベジェ曲線に従い変化します。
X軸は時間経過率を、Y軸は変化率を示します。
x1, x2 は、0.0～1.0 の範囲で指定します。
y1, y2 は 1.0 を超えたり負の値を指定することができます。