參考
總結
實現拋物線步驟：
1、拋物線運動元素使用至少內外兩層標簽，可以外面一層<div>，里面是<img>圖片
2、內外兩次標簽一個負責水平方向的translate移動，一個負責垂直方向的translate移動，然后使用不同的緩動函數（timing-function）
注意：外層標簽控制水平方向的移動，速度為勻速，內層標簽控制垂直方向的移動，速度為先慢后快
這其實也不難理解，比方說我們扔鉛球，其運動軌跡實際上是水平推力和地球引力共同作用的結果，由於空氣阻力可以忽略不計，因此，水平方向我們可以看成是勻速運動，而垂直方向由於重力加速度的存在，因此會越來越快。正好和上面CSS代碼的緩動曲線是一致的，因此出現了拋物線運動。
如何獲取transform呢？
let transform = $(targetNode).css('transform')
會返回一個字符串，比如我這里是設置了translateX -200px
獲取的字符串中就會包含
"matrix(1, 0, 0, 1, -200, 0)"
矩陣各個值
matrix(scaleX, skewY, skewX, scaleY, translateX, translateY)
代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<style> .box_outer,.box_inner { width: 100px; height: 100px; transition: transform .5s; } .box_outer { transition-timing-function: linear; } .box_inner { background: red; transition-timing-function: cubic-bezier(.55,0,.85,.36); } </style>
<script> window.onload = function(){ var boxOuter = document.getElementsByClassName('box_outer'); var boxInner = document.getElementsByClassName('box_inner'); document.onclick = function(){ $('.box_outer').css('transform','matrix(1, 0, 0, 1, 300, 0)'); $('.box_inner').css('transform','matrix(1, 0, 0, 1, 0, 400)'); } } </script>
</head>
<body>
<div class="box_outer">
<div class="box_inner"></div>
</div>
</body>
</html>