=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

=waveSurroundingHoverEffect
  +animation-name(waveSurroundingHoverEffect)
  animation-timing-function: ease-in-out
  +animation-duration(4s)
  +animation-iteration-count(infinite)
  animation-direction: alternate
  animation-play-state: paused

=waveSurroundingHoverEffectInvert
  +animation-name(waveSurroundingHoverEffectInvert)
  animation-timing-function: ease-in-out
  +animation-duration(4s)
  +animation-iteration-count(infinite)
  animation-direction: alternate
  animation-play-state: paused

@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)

@keyframes waveSurroundingHoverEffect
  0%, 100%
    stroke-dashoffset: 0
  50%
    stroke-dashoffset: 30px

@keyframes waveSurroundingHoverEffectInvert
  0%, 100%
    stroke-dashoffset: 0
  50%
    stroke-dashoffset: -30px


//@keyframes diamondShine
//  0%
//    transform: rotate(0deg) scale3d(1,1,1)
//
//  20%
//    transform: rotate(45deg) scale3d(0.6,0.6, 1)
//  40%, 100%
//    transform: rotate(90deg) scale3d(1, 1,1)

@keyframes diamondShine
  0%
    transform: rotate(0deg) scale3d(1,1,1)

  20%
    transform: rotate(45deg) scale3d(0.6,0.6, 1)
  40%, 100%
    transform: rotate(90deg) scale3d(1, 1,1)