加入购物车动画（css）

<!DOCTYPE html>
<html>

<head>
  <style>
    html {
      height: 100%;
    }

    body {
      height: 100%;
      margin: 0;
    }

    .m-fly-wrap {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 99;
    }

    .m-box {
      position: absolute;
      left: calc(50% + 200px);
    }

    .m-box.run {
      animation: box-move 1s cubic-bezier(0, 0, 1, 1);
      animation-fill-mode: forwards;
    }

    .m-inner {
      position: absolute;
      display: none;
       80px;
      height: 80px;
      border-radius: 50%;
      background: #f66f0c;
      background-size: 100% 100%;
      transform: translateX(-50%);
    }

    .m-inner.run {
      display: inline-block;
      animation: inner-move 1s;
      animation-timing-function: cubic-bezier(.05, .51, .31, .82);
      animation-fill-mode: forwards;
    }

    @keyframes box-move {
      0% {
        top: 0%;
      }

      100% {
        top: 90%;
      }
    }

    @keyframes inner-move {
      0% {
        left: 0;
      }

      100% {
        left: -200px;
      }
    }
  </style>

</head>

<body>
  <div class="m-fly-wrap">
    <button id="m-btn1">肉夹馍</button>
    <button id="m-btn2">酸辣粉</button>
    <div id="m-box" class="m-box">
      <div id="m-inner" class="m-inner"></div>
    </div>
  </div>
  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  <script>

    $(function () {
      var dom = {
        btn1: $('#m-btn1'),
        btn2: $('#m-btn2'),
        box: $('#m-box'),
        inner: $('#m-inner')
      }

      function fly(img) {
        dom.box.addClass('run')
        dom.inner.addClass('run')
        dom.inner.css({ backgroundImage: 'url(' + img + ')' })
        setTimeout(function () {
          dom.box.removeClass('run')
          dom.inner.removeClass('run')
        }, 1500)
      }

      dom.btn1.on('click', function () {
        fly('http://p1.meituan.net/xianfu/3a01d174dd0f8e09035ebd12c1b9e912266444.png')
      })

      dom.btn2.on('click', function () {
        fly('http://p0.meituan.net/xianfu/5c98777fff2718063d07eb427e886e5a224202.png')
      })
    })
  </script>
</body>

</html>