SOURCE

(function(){
  var nelsonATCAControlBar = document.getElementById("nelsonATCAControlBar");
  var nelsonATCAContainer = "";
  var prefixes = ['', '-ms-','-moz-', '-webkit-', '-khtml-', '-o-'];
  nelsonAddtoCartAnimation = {
    a:"",
    b:"",
    c:"",
    startX:"",
    startY:0,
    endX:"",
    endY:0,
    second:0,
    speed:10,
    init:function(startX,endX,rC,txt){
      if(!document.getElementById("nelsonATCAContainer")){
        var _nelsonATCAContainer = document.createElement("div");
        _nelsonATCAContainer.className = "nelsonATCAContainer";
        _nelsonATCAContainer.id = "nelsonATCAContainer";
        _nelsonATCAContainer.innerText = txt?txt:"";
        _nelsonATCAContainer.style.left = startX + "px";
        nelsonATCAControlBar.appendChild(_nelsonATCAContainer);
        nelsonATCAContainer = _nelsonATCAContainer;
        _nelsonATCAContainer = null;
        this.startX = startX;
        this.endX = endX;
        this.formula(rC);
        this.second = Math.abs(startX - endX) * this.speed / 1000;
        return this;
      }
    },
    formula:function(rC){
      var centerX =  (this.startX - this.endX) / 2 + this.endX;
      this.a = rC;
      this.b = -2 * this.a * centerX;
      this.c = -1 * this.a * this.startX * this.startX - this.b * this.startX;
    },
    move:function(){
      var that = this;
      for(var i in prefixes){
        nelsonATCAContainer.style[prefixes[i] + prefixes[i]?"A":"a" + "nimation"] = "moveAnimation " + that.second + "s forwards";
      }
      nelsonATCAContainer.style.display = "block";
      var s = setInterval(function(){
        var startLeft = nelsonATCAContainer.offsetLeft;
        if(startLeft <= that.endX){
          clearInterval(s);
          that.resetPosition();
          return that;
        }
        nelsonATCAContainer.style.left = startLeft - 1 + "px";
        startLeft = nelsonATCAContainer.offsetLeft;
        nelsonATCAContainer.style.top = that.a * startLeft * startLeft + that.b * startLeft + that.c + "px";
      },that.speed)
    },
    resetPosition:function(){
      nelsonATCAContainer.style.display = "none";
      nelsonATCAContainer.style.left = this.startX + "px";
      nelsonATCAContainer.style.top = this.startY + "px";

    },
    setValue:function(value){
      nelsonATCAContainer.innerText = value;
    }
  }
})()
var screenWidth = document.body.clientWidth || document.documentElement.clientWidth;
nelsonAddtoCartAnimation.init(screenWidth -75,(screenWidth - 130)*5/6 - 10,0.03,1);
nelsonATCARightContainer.onclick = function(){
  nelsonAddtoCartAnimation.move();
}

<div id="nelsonATCAControlBar" class="nelsonATCAControlBar">
  <div class="nelsonATCALeftControlBar fix">
    <button>购</button>
    <button>物</button>
    <button>车</button>
  </div>
  <div class="nelsonATCARightContainer" id="nelsonATCARightContainer">
    <button>加入购物车</button>
  </div>
  <!--<span class="nelsonATCAContainer" id="nelsonATCAContainer">
    1
  </span>-->
</div>

*{margin: 0;padding: 0;}
html,body{height: 100%;background: #f7f7f7;}
.fix{zoom: 1;}
.fix:after{
  content: "";
  display: block;
  visibility: hidden;
  line-height: 0;
  clear: both;
}
.nelsonATCAControlBar{
  width: 100%;
  height: 50px;
  position: fixed;
  bottom: 0;left: 0;
  padding-right: 130px;
        -webkit-box-sizing: border-box;
         -moz-box-sizing: border-box;
      box-sizing: border-box;
}
.nelsonATCAControlBar:before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  background: #ebebeb;
  height: 1px;
}
.nelsonATCAControlBar .nelsonATCALeftControlBar{width: 100%;height: 50px;}
.nelsonATCAControlBar button{
  height: 50px;
  border: none;
  background: #FFFFFF;
  padding: 0;
  margin: 0;
  line-height: 50px;
}
.nelsonATCAControlBar button{
  outline: none;
}
.nelsonATCAControlBar button:active{
  background: #F7F7F7;
}
.nelsonATCAControlBar .nelsonATCALeftControlBar > button{
  width: 33.333%;
  float:left;
  position: relative;
}
.nelsonATCAControlBar .nelsonATCALeftControlBar > button:after{
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 1px;
  background: #EBEBEB;
  height: 50px;
}
.nelsonATCAControlBar .nelsonATCARightContainer{
  width: 130px;
  position: absolute;
  right: 0;
  top: 0;
  height: 50px;
}
.nelsonATCAControlBar .nelsonATCARightContainer > button{
  width: 100%;
  height: 100%;
  color: #FFFFFF;
  background: #d00221;
  position: relative;
  z-index: 50;
}
.nelsonATCAControlBar .nelsonATCARightContainer > button:active{background: #A92221;}
.nelsonATCAControlBar .nelsonATCAContainer{
  height: 20px;
  background: #D0021B;
  position: absolute;
  top: 0;
  min-width: 20px;
  z-index: 60;
  padding: 0 5px;
  display: none;
  line-height: 20px;
  text-align: center;
  color: #FFFFFF;
  font-size: 1rem;
  -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
        border-radius: 10px;
}
@-webkit-keyframes moveAnimation{
  0%   {transform: scale(1);-webkit-transform: scale(1);-moz-transform: scale(1);-ms-transform: scale(1);}
  50%  {transform: scale(0.9);-webkit-transform: scale(0.9);-moz-transform: scale(0.9);-ms-transform: scale(0.9);}
  100%  {transform: scale(0.4);-webkit-transform: scale(0.4);-moz-transform: scale(0.4);-ms-transform: scale(0.4);}
}
@-moz-keyframes moveAnimation{
  0%   {transform: scale(1);-webkit-transform: scale(1);-moz-transform: scale(1);-ms-transform: scale(1);}
  50%  {transform: scale(0.9);-webkit-transform: scale(0.9);-moz-transform: scale(0.9);-ms-transform: scale(0.9);}
  100%  {transform: scale(0.4);-webkit-transform: scale(0.4);-moz-transform: scale(0.4);-ms-transform: scale(0.4);}
}
@-ms-keyframes moveAnimation{
  0%   {transform: scale(1);-webkit-transform: scale(1);-moz-transform: scale(1);-ms-transform: scale(1);}
  50%  {transform: scale(0.9);-webkit-transform: scale(0.9);-moz-transform: scale(0.9);-ms-transform: scale(0.9);}
  100%  {transform: scale(0.4);-webkit-transform: scale(0.4);-moz-transform: scale(0.4);-ms-transform: scale(0.4);}
}
@keyframes moveAnimation{
  0%   {transform: scale(1);-webkit-transform: scale(1);-moz-transform: scale(1);-ms-transform: scale(1);}
  50%  {transform: scale(0.9);-webkit-transform: scale(0.9);-moz-transform: scale(0.9);-ms-transform: scale(0.9);}
  100%  {transform: scale(0.4);-webkit-transform: scale(0.4);-moz-transform: scale(0.4);-ms-transform: scale(0.4);}
}