@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.fade-1-out { animation: fadeOut .25s; opacity: 0; }
.fade-2-out { animation: fadeOut .5s; opacity: 0; }
.fade-3-out { animation: fadeOut .75s; opacity: 0; }
.fade-4-out { animation: fadeOut 1s; opacity: 0; }

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.fade-1-in { animation: fadeIn .25s; }
.fade-2-in { animation: fadeIn .5s; }
.fade-3-in { animation: fadeIn .75s; }
.fade-4-in { animation: fadeIn 1s; }

@keyframes attention {
  0%    { margin-left: -5px; }
  20%   { margin-left: 5px; }
  40%   { margin-left: -5px; }
  60%   { margin-left: 5px; }
  80%   { margin-left: -2.5px; }
  90%   { margin-left: 2.5px; }
  100%  { margin-left: 0px; }
}

.attention { animation: attention .5s; }


@keyframes slideUpIcon {
  0% {
    translate: 0 0;
  }
  100% {
    translate: 0 -.5rem
  }
}

.slide-1-up-icon { animation: slideUpIcon .25s; translate: 0 -.5rem }
.slide-2-up-icon { animation: slideUpIcon .5s; translate: 0 -.5rem }
.slide-3-up-icon { animation: slideUpIcon .75s; translate: 0 -.5rem }
.slide-4-up-icon { animation: slideUpIcon 1s; translate: 0 -.5rem }

@keyframes slideDownIcon {
  0% {
    translate:  0 -.5rem
  }
  100% {
    translate: 0 0;
  }
}

.slide-1-down-icon { animation: slideDownIcon .25s; translate: 0 0; }
.slide-2-down-icon { animation: slideDownIcon .5s; translate: 0 0; }
.slide-3-down-icon { animation: slideDownIcon .75s; translate: 0 0; }
.slide-4-down-icon { animation: slideDownIcon 1s; translate: 0 0; }

@keyframes slideUpLabel {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.slide-up-label { animation: slideUpLabel .25s; opacity: 0; translate: 0 1rem; }

@keyframes slideDownLabel {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.slide-down-label { animation: slideDownLabel .25s; opacity: 1; translate: 0 1rem; }