模板代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.ball {
height: 30px;
width: 30px;
border-radius: 50%;
position: absolute;
bottom: 40px;
z-index: 10;
left: 40px;
background: #2bd8ff;
}
.run_top_right {
display: block;
animation: run-right-right .7s 0.4s 1 linear, run-right-top .7s 0.4s 1 linear;
animation-fill-mode: forwards;
}
@keyframes run-right-top {
0% {
bottom: 40px;
opacity: 1;
}
50% {
opacity: 1;
}
100% {
bottom: 400px;
opacity: 0;
}
}
@keyframes run-right-right {
0% {
left: 40px;
}
100% {
left: 300px;
}
}
</style>
</head>
<body>
<div class="ball run_top_right"></div>
</body>
</html>
其中，run-right-right控制向右運(yùn)動(dòng)，run-right-top控制向上運(yùn)動(dòng)绩衷。（當(dāng)然，模板默認(rèn)做直線運(yùn)動(dòng)）
貝塞爾曲線傳送門(mén)
打開(kāi)傳送們激率，我們修改run-right-top的緩動(dòng)函數(shù)咳燕，對(duì)比著看，如下圖：
即改這句：
animation: run-right-right .7s 0.4s 1 linear, run-right-top .7s 0.4s 1 linear;
linear
Jietu20191201-220043.jpg
linear.gif
ease
Jietu20191201-220055.jpg
ease.gif
ease-out
Jietu20191201-215950.jpg
ease-out.gif
由于篇幅限制乒躺，就不一一上傳了招盲。
可以看到，在水平運(yùn)動(dòng)為勻速運(yùn)動(dòng)時(shí)嘉冒，改變垂直運(yùn)動(dòng)的緩動(dòng)函數(shù)可以帶來(lái)直觀的與之對(duì)應(yīng)的路徑效果曹货。同樣的咆繁，我們可以定制我們的貝塞爾曲線，讓小球沿著路線運(yùn)動(dòng)控乾。比如么介，來(lái)個(gè)炫的：（最后上傳的一次了）
cubic-bezier(.37,-0.99,.16,1.04)
Jietu20191201-221656.jpg
custom.gif
另外，如果垂直緩動(dòng)函數(shù)為linear蜕衡，改水平的緩動(dòng)函數(shù)壤短，會(huì)發(fā)生什么事呢？（最最最后的一次上傳）
讓我們以ease-out為例子：（以下圖1為ease-out的曲線）
Jietu20191201-222322.jpg
ease-out-reverse.gif
可以觀察得知慨仿，改水平的緩動(dòng)函數(shù)會(huì)使小球做鏡像曲線運(yùn)動(dòng)（圖1斜線即對(duì)稱軸）久脯。其實(shí)這個(gè)觀點(diǎn)不是很準(zhǔn)確，因?yàn)榭匆幌陆酉聛?lái)改動(dòng)水平緩動(dòng)函數(shù)為之前我們的定制函數(shù)cubic-bezier(.37,-0.99,.16,1.04)：
Jietu20191201-223518.jpg
custom-reverse.gif
這樣又得不出結(jié)論了镰吆，有一定規(guī)律帘撰，但說(shuō)不出來(lái)，對(duì)于像ease這樣的函數(shù)應(yīng)該簡(jiǎn)單理解水平會(huì)做鏡像曲線運(yùn)動(dòng)是沒(méi)什么問(wèn)題的万皿，對(duì)于復(fù)雜的還是要多實(shí)踐摧找。
