目標——就是純css實現下面的曲線運動

image.png

這里是我最后實現的效果動畫：在線視頻實現效果

直接看所有的代碼；

html代碼

  <div class="ball run_top_right"></div>

css代碼

html{
 background: #ad4e24;
}
//定義球的初始值，位置是絕對定位；
.ball{
  height: 100px;
  width: 100px;
  border-radius: 50%;
  position: absolute;
  bottom: 40px;
  z-index: 10;
  left: 40px;
  background: greenyellow;
}

//定義動畫的流程
.run_top_right {
  display: block;
  animation: run-right-right 3s 0.4s 1 linear, run-right-top 3s 0.4s 1 cubic-bezier(.66,.1,1,.41);
  // animation: run-right-right 3s 0.4s 1 linear, run-right-top 3s 0.4s 1 ease-out;
  animation-fill-mode: forwards;
}

//向上走的動畫初始及結尾值
@keyframes run-right-top {
  0% {
    bottom: 40px;
  }

  100% {
    bottom: 800px;
  }
}
//向上右的動畫初始及結尾值
@keyframes run-right-right {
  0% {
    left: 40px;
    transform: scale(0.7);
  }

  100% {
    left: 600px;
    transform: scale(0.45);
  }
}

這里簡單解釋下：

第一、分解運動

上圖的曲線運動進行分解
向右：勻速運動；
向上：加速運動；（因為向上的線越來越陡，意味著速度越來越快，所以在做加速運動）

第二、實現代碼解釋

有了對該運動的本質認識，那么實現起來就很易如反掌了；

@keyframes run-right-right {
  0% {
    left: 40px;
    transform: scale(0.7);
  }

  100% {
    left: 600px;
    transform: scale(0.45);
  }
}

——@keyframes 是css3的一個規(guī)則，用來定義一個運動的每個楨的位置，大小顏色等；

然后run-right-right就是這個動畫特性的名字，很好理解；然后0%就是開始的時候的left值；transform: scale(0.7);變小0.7；時間到100%時 left值變大到600px的位置，然后變小到0.45；（這里的位置，大小都是相對于初始設置的ball類里面的值）

animation: run-right-right 3s 0.4s 1 linear, run-right-top 3s 0.4s 1 cubic-bezier(.66,.1,1,.41);

——這段代碼的意思是動畫animation用run-right-right動畫和 run-right-top動畫，注意我們是同時引用的兩個動畫；
就是@keyframes 所定義的，然后我們又設置了一些參數，逐一解釋：

• 一.第一個參數就是引用的動畫名字；
• 二，動畫持續(xù)時間3s；
• 三、0.4s是延遲時間為0.4s，以run_top_right加到ball上面的時間為準，延后0.4s;
• 四、1是動畫的執(zhí)行次數是1次；
• 五、cubic-bezier(.66,.1,1,.41) 就是重要的貝塞爾曲線(cubic-bezier)；

實際上是設置animation-timing-function的屬性；就是設置運動速度的特性屬性；

• 1. linear，就是線性運動，也就是勻速運動；
• 2 ease，默認。動畫以低速開始，然后加快，在結束前變慢。
• 3.ease-in，ease-out,ease-in-out,就很好記，ease就是慢的意思，ease-in就是慢速開始，就是做加速運動，ease-out就是減速運動，ease-in-out就是先加速后減速；當然我們也可以設置成cubic-bezier()值；

貝塞爾曲線在線取值

打開網站就看到如下的界面；你可以自己調解運動曲線；我自己選了個向上做加速的曲線；然后復制cubic-bezier()值就是可以了。

image.png

因為這里我只需要向上的運動做變速運動所以run-right-right 我設置的是linear，勻速運動，然后 run-right-top設置的是cubic-bezier(.66,.1,1,.41)，這樣的加速運動，這樣得到的運動路徑就是一條曲線?。∏€的軌跡又run-right-top的cubic-bezier值決定！

  animation-fill-mode: forwards;

animation-fill-mode設置動畫完成后的狀態(tài)；
forwards：當動畫完成后，保持最后一個屬性值（在最后一個關鍵幀中定義）。簡單說就是定格在最后100%的樣子；
backwards：在 animation-delay 所指定的一段時間內，在動畫顯示之前，應用開始屬性值（在第一個關鍵幀中定義）。就是定格在0%時候的樣子

完成