=movingDown
  +animation-name(movingDown)
  +animation-duration(1s)
  +animation-iteration-count(infinite)
  animation-play-state: paused

=movingRight
  +animation-name(movingRight)
  +animation-duration(1s)
  +animation-iteration-count(infinite)
  animation-play-state: paused
//On hover change animation play state to running
//now the animations will stop instead of jumping back to the original state

@keyframes movingDown
  0%, 100%
    +translate3dRotate(0, 0, 0, 0deg)
  50%
    +translate3dRotate(0, 8px, 0, 0deg)

@keyframes movingRight
  0%, 100%
    +translate3d(0, 0, 0)
  50%
    +translate3d(5px, 0, 0)


=spinLeftAnimation($name, $scale: 1)
  @-webkit-keyframes #{$name}
    0%
      +translate3dRotateScale(0, 0, 0, 360deg, $scale)
    100%
      +translate3dRotateScale(0, 0, 0, 0deg, $scale)

=spinRightAnimation($name, $scale: 1)
  @-webkit-keyframes #{$name}
    0%
      +translate3dRotateScale(0, 0, 0, 0deg, $scale)
    100%
      +translate3dRotateScale(0, 0, 0, 360deg, $scale)