level up & level down animation

using bootstrap glpyhicons; fully customizable

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <!-- click on the Level Up text to change the animation --->
  <div class="up-anim-parent flex-it">
    <div class="up-anim-chevron-container">
      <span class="up-anim-chevron glyphicon glyphicon-chevron-up"></span>
      <span class="up-anim-chevron glyphicon glyphicon-chevron-up"></span>
    </div>
    <a href="#" id="switchEle"><span class="up-anim-text">Level Up!</span>
    </a>
  </div>

SCSS

/* --- vars --- */
$textSize: 2em; /* --- customizable in em or pt --- */
$color: #fff; /* --- customizable in hex or string --- */
$animSpeed: .75s; /* --- customizable in s --- */
$arrowSize: ($textSize * 1.5); /* --- do not change this --- */

html, body, .up-anim-parent  {
  position: relative;
  width: 100%;
  height: 100%;
}

.up-anim-parent {
  background-color: rgba(0,0,0,.75); /* --- bg will shine through if available --- */
}

.up-anim-text {
  font-size: $textSize;
  font-weight: bold;
  color: $color;
}

.up-anim-chevron-container {
  position: relative;
  height: ($arrowSize * 1.5);
  margin-bottom: $textSize;
}

.up-anim-chevron-container > .up-anim-chevron {
  position: absolute;
  left: 50%;
  font-size: $arrowSize;
  color: $color;
  -webkit-transform: translate(-50%);
  -ms-transform: translate(-50%);
  transform: translate(-50%);
  opacity: 0;
}

.up-anim-chevron-container > .up-anim-chevron:first-child {
  top: 20%;
  -webkit-animation: moveUpAndFade $animSpeed linear 0s infinite;
  animation: moveUpAndFade $animSpeed linear 0s infinite;
}

.up-anim-chevron-container > .up-anim-chevron {
  top: 50%;
    -webkit-animation: moveUpAndFade $animSpeed linear ($animSpeed / 4) infinite;
  animation: moveUpAndFade $animSpeed linear ($animSpeed / 4) infinite;
}

.reverseAnim {
  animation-direction: reverse !important;
}

@-webkit-keyframes moveUpAndFade {
  0% {
    top: 100%;
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 0;
  }
  100% {
    top: -20%;
    opacity: 0;
  }
}
@keyframes moveUpAndFade {
  0% {
    top: 100%;
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 0;
  }
  100% {
    top: -20%;
    opacity: 0;
  }
}

.flex-it {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;     
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;
}

/* --- remove default a styles --- */
#switchEle:hover, #switchEle:focus, #switchEle:active {
 ...

JavaScript

$("#switchEle").click(function() {
	var $ele = $(".up-anim-chevron"),
  		toDown = $ele.hasClass("glyphicon-chevron-up");
  $ele.removeClass("glyphicon-chevron-" + (toDown ? "up" : "down reverseAnim")).addClass("glyphicon-chevron-" + (toDown ? "down reverseAnim" : "up"));
  $(".up-anim-text").text("Level " + (toDown ? "Down" : "Up") + "!");
});