css购物车(抛物线)运动

抛物线动画的原理，就是用两个元素，子元素会继承父元素的运动，将父元素在横向运动，子元素在纵向运动，子元素会形成一种双向运动。而父元素在横向上是匀速运动，子元素在纵向上是变速运动，可以使用贝塞尔曲线来定义运动，二者合成，就能出现一个曲线运动。具体的曲线，跟选择的贝塞尔函数有关，调整好，就可以形成抛物线运动。ball和after元素都运动，只不过ball元素不显示罢了。

例如：

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

.ball{
  height: 100px;
  width: 100px;
  border-radius: 50%;
  position: absolute;
  top: 40px;
  left: 40px;
  z-index: 10;
  animation: to-rr 1s 0.4s 1 linear;
  animation-fill-mode: forwards;
}
.ball:after{
    content: '';
    height: 100px;
    width: 100px;
    display: block;
    border-radius: 50%;
    background: greenyellow;
    animation: to-rt 1s 0.4s 1 cubic-bezier(.66,.1,1,.41);
    animation-fill-mode: forwards;
}
@keyframes to-rt {
  0% {
    transform: translateY(40px);
  }
  100% {
    transform: translateY(800px);
  }
}

@keyframes to-rr {
  0% {
     transform: translateX(40px) scale(0.7);
  }
  100% {
    transform: translateX(600px) scale(0.45);
  }
}