翻译和缩放相对值的麻烦

Question

我正在尝试使用关键帧进行壁球动画，但我遇到了与比例值和翻译值的关系的麻烦。

http://codepen.io/FelipeMartinin/pen/dYXabb?editors=110

正如你所看到的，广场的底部永远不会通过红线，也不会在到达之后回来。但请注意它正在发生。

任何人都可以帮助我吗？我会很开心！

按照下面的关键帧：

@keyframes squashInDown{

  0%, 100% {
    transition-time-function: ease-in;
  }

  0% {
    transform:  translate(0px,-300px)  scaleX(0.50) scaleY(1.50) ;
  }
  11% {
    transform:  translate(0px,-197px)  scaleX(0.41) scaleY(1.59) ;
  }
  30% {
    transform:  translate(0px,-18px)  scaleX(0.25) scaleY(1.75) ;
  }
  35% {
    transform:  translate(0px,18px)  scaleX(1.70) scaleY(0.30) ;
  }
  46% {
    transform:  translate(0px,22px)  scaleX(1.80) scaleY(0.20) ;
  }
  54% {
    transform:  translate(0px,-1px)  scaleX(0.80) scaleY(1.20) ;
  }
  66% {
    transform:  translate(0px,8px)  scaleX(1.20) scaleY(0.80) ;
  }
  78% {
    transform:  translate(0px,0px)  scaleX(0.95) scaleY(1.05) ;
  }
  100% {
    transform:  translate(0px,0px)  scaleX(0.95) scaleY(1.05) ;
  }
}

注意：我正在尝试遵循Animate.css库模式，换句话说，创建可能在任何其他项目中使用的东西。

提前致谢