天天看點

分享一款線上調試的貝塞爾曲線

  介于很多前端小夥伴對于css3的動畫的運動速度不太了解,今天就分享一款可以線上調試的貝塞爾曲線,附上連結,http://cubic-bezier.com/#.17,.67,.83,.67

1.<code>ease</code> 對應自定義cubic-bezier(.25,.01,.25,1),效果為先慢後快再慢;

分享一款線上調試的貝塞爾曲線

2.<code>linear</code> 對應自定義cubic-bezier(0,0,1,1),效果為勻速直線;

分享一款線上調試的貝塞爾曲線

3.<code>ease-in</code> 對應自定義cubic-bezier(.42,0,1,1),效果為先慢後快;

分享一款線上調試的貝塞爾曲線

4.<code>ease-out</code> 對應自定義cubic-bezier(0,0,.58,1),效果為先快後慢;

分享一款線上調試的貝塞爾曲線

5.<code>ease-in-out</code> 對應自定義cubic-bezier(.42,0,.58,1),效果為先慢後快再慢。

分享一款線上調試的貝塞爾曲線

最後附上我的個人網站:www.ydhtml.com