Animate an element with up and down direction. Originally generated by SassMeister.com - http://sassmeister.com/gist/1fb08bc2e10d15e9523d

animate-up-down-mixin.scss

// Add vendor prefixes to keyframes
@mixin keyframe ($animation_name, $fromTranslateY, $toTranslateY, $transition) {
  @-webkit-keyframes $animation_name {
    from {
      -webkit-transform: $fromTranslateY;
      -webkit-animation-timing-function: $transition;
    }
    to {
      -webkit-transform: $toTranslateY;
      -webkit-animation-timing-function: $transition;
    }
  }

  @-moz-keyframes $animation_name {
    from {
      -moz-transform: $fromTranslateY;
      -moz-animation-timing-function: $transition;
    }
    to {
      -moz-transform: $toTranslateY;
      -moz-animation-timing-function: $transition;
    }
  }
  
  @-o-keyframes $animation_name {
    from {
      -o-transform: $fromTranslateY;
      -o-animation-timing-function: $transition;
    }
    to {
      -o-transform: $toTranslateY;
      -o-animation-timing-function: $transition;
    }
  }  

  @keyframes $animation_name {
    from {
      transform: $fromTranslateY;
      animation-timing-function: $transition;
    }
    to {
      transform: $toTranslateY;
      animation-timing-function: $transition;
    }
  }
}

// Usage: @include animation(animationName, 1s, infinit, alternate)
@mixin animation ($animation, $speed, $iteration, $direction) {
  -webkit-animation: $animation $speed $iteration;
  -webkit-animation-direction: $direction;
  -moz-animation: $animation $speed $iteration;
  -moz-animation-direction: $direction;
  -o-animation: $animation $speed $iteration;
  -o-animation-direction: $direction;
  animation: $animation $speed $iteration;
  animation-direction: $direction;
}

animate-up-down-output.css

@-webkit-keyframes animateUpDown {
  from {
    -webkit-transform: translateY(-3px);
    -webkit-animation-timing-function: ease-in-out;
  }

  to {
    -webkit-transform: translateY(3px);
    -webkit-animation-timing-function: ease-in-out;
  }
}
@-moz-keyframes animateUpDown {
  from {
    -moz-transform: translateY(-3px);
    -moz-animation-timing-function: ease-in-out;
  }

  to {
    -moz-transform: translateY(3px);
    -moz-animation-timing-function: ease-in-out;
  }
}
@-o-keyframes animateUpDown {
  from {
    -o-transform: translateY(-3px);
    -o-animation-timing-function: ease-in-out;
  }

  to {
    -o-transform: translateY(3px);
    -o-animation-timing-function: ease-in-out;
  }
}
@keyframes animateUpDown {
  from {
    transform: translateY(-3px);
    animation-timing-function: ease-in-out;
  }

  to {
    transform: translateY(3px);
    animation-timing-function: ease-in-out;
  }
}
.cssSelector {
  font-size: 60px;
  -webkit-animation: animateUpDown 1s infinite;
  -webkit-animation-direction: alternate;
  -moz-animation: animateUpDown 1s infinite;
  -moz-animation-direction: alternate;
  -o-animation: animateUpDown 1s infinite;
  -o-animation-direction: alternate;
  animation: animateUpDown 1s infinite;
  animation-direction: alternate;
}

animate-up-down.scss

// Declare keyframe animation
@include keyframe(animateUpDown, translateY(-3px), translateY(3px), ease-in-out);

// Include animation within CSS rule code block
.cssSelector {
  font-size: 60px;
  @include animation(animateUpDown, 1s, infinite, alternate)
}

sample-element.html

<div class="cssSelector">♠</div>