+keyframes(ballAnimation)
  0%
    +transform(translate(0, -100vh))
  20%
    +transform(translate(0, 0))
  30%
    +transform(translate(0, -40vh))
  40%
    +transform(translate(0, 0))
  50%
    +transform(translate(0, -20vh))
  60%
    +transform(translate(0, 0))
  68%
    +transform(translate(0, -10vh))
  74%
    +transform(translate(0, 0))
  80%
    +transform(translate(0, -5vh))
  84%
    +transform(translate(0, 0))
  88%
    +transform(translate(0, -2vh))
  92%
    +transform(translate(0, 0))
  96%
    +transform(translate(0, -1vh))
  100%
    +transform(translate(0, 0))

=keyframes($name)
  @-webkit-keyframes #{$name}
    @content
  @-moz-keyframes #{$name}
    @content
  @-o-keyframes #{$name}
    @content
  @keyframes #{$name}
    @content

.ball
  +animation(ballAnimation, 3s, cubic-bezier(0.895, 0.03, 0.685, 0.22), 0s, 1, normal, forwards)

=animation($name, $time, $type, $delay, $iteration, $direction, $fillmode)
  -webkit-animation: $name $time $type $delay $iteration $direction $fillmode
  -moz-animation: $name $time $type $delay $iteration $direction $fillmode
  -o-animation: $name $time $type $delay $iteration $direction $fillmode
  animation: $name $time $type $delay $iteration $direction $fillmode