前言
介於很多前端小伙伴對於css3的動畫的運動速度不太理解，今天就分享一款可以在線調試的貝塞爾曲線，附上鏈接，http://cubic-bezier.com/#.17,.67,.83,.67
規則
1.ease 對應自定義cubic-bezier(.25,.01,.25,1),效果為先慢后快再慢；
2.linear 對應自定義cubic-bezier(0,0,1,1)，效果為勻速直線；
![[外鏈圖片轉存失敗(img-4sRmggcg-1565665642991)()]](/image/aHR0cHM6Ly9pbWdjb252ZXJ0LmNzZG5pbWcuY24vYUhSMGNEb3ZMM2QzZHk1NVpHaDBiV3d1WTI5dEwybHRaeTh5TURFNExUQTVMVEV4THpJdWFuQm4_eC1vc3MtcHJvY2Vzcz1pbWFnZS9mb3JtYXQscG5n.png)
3.ease-in 對應自定義cubic-bezier(.42,0,1,1),效果為先慢后快；
4.ease-out 對應自定義cubic-bezier(0,0,.58,1),效果為先快后慢；
5.ease-in-out 對應自定義cubic-bezier(.42,0,.58,1),效果為先慢后快再慢。
用法
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>demo</title>
<style>
.linear {
width: 50px;
height: 50px;
background-color: #ff0000;
-webkit-transition: all 2s linear;
-moz-transition: all 2s linear;
-o-transition: all 2s linear;
transition: all 2s linear;
}
.linear:hover {
-webkit-transform: translateX(100px);
-moz-transform: translateX(100px);
-o-transform: translateX(100px);
transform: translateX(100px);
}
.custom {
width: 50px;
height: 50px;
background-color: #00ff00;
-webkit-transition: all 2s cubic-bezier(.94,-0.25,.32,1.31);
-moz-transition: all 2s cubic-bezier(.94,-0.25,.32,1.31);
-o-transition: all 2s cubic-bezier(.94,-0.25,.32,1.31);
transition: all 2s cubic-bezier(.94,-0.25,.32,1.31);
}
.custom:hover {
-webkit-transform: translateX(200px);
-moz-transform: translateX(200px);
-o-transform: translateX(200px);
transform: translateX(200px);
}
</style>
</head>
<body>
<div class="linear"></div>
<div class="custom"></div>
</body>
</html>
最后附上我的個人網站：www.ydhtml.com