.fade-in {
   animation-duration: 0.5s;
   -webkit-animation-duration: 0.5s;
   animation-fill-mode: both;
   animation-name: fadeIn;
   -webkit-animation-name: fadeIn;
}

.fade-out {
   animation-duration: 0.5s;
   -webkit-animation-duration: 0.5s;
   animation-fill-mode: both;
   animation-name: fadeOut;
   -webkit-animation-name: fadeOut;
}

.expand {
   animation-duration: 0.5s;
   -webkit-animation-duration: 0.5s;
   animation-fill-mode: both;
   animation-name: expand;
   -webkit-animation-name: expand;
}

.shrink {
   animation-duration: 0.5s;
   -webkit-animation-duration: 0.5s;
   animation-fill-mode: both;
   animation-name: shrink;
   -webkit-animation-name: shrink;
}

.fold {
   animation-duration: 0.5s;
   -webkit-animation-duration: 0.5s;
   animation-fill-mode: both;
   animation-name: fold;
   -webkit-animation-name: fold;
}

.unfold {
   animation-duration: 0.5s;
   -webkit-animation-duration: 0.5s;
   animation-fill-mode: both;
   animation-name: unfold;
   -webkit-animation-name: unfold;
}

.dim {
   animation-duration: 0.5s;
   -webkit-animation-duration: 0.5s;
   animation-fill-mode: both;
   animation-name: dim;
   -webkit-animation-name: dim;
}

.brighten {
   animation-duration: 0.5s;
   -webkit-animation-duration: 0.5s;
   animation-fill-mode: both;
   animation-name: brighten;
   -webkit-animation-name: brighten;
}

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

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

@keyframes expand {
   0% {transform: scale(0);}
   100% {transform: scale(1);}
}

@keyframes shrink {
   0% {transform: scale(1);}
   100% {transform: scale(0);}
}

@keyframes fold {
   0% {transform: scale(1, 1);}
   100% {transform: scale(1, 0);}
}

@keyframes unfold {
   0% {transform: scale(1, 0);}
   100% {transform: scale(1, 1);}
}

@keyframes dim {
   0% {filter: brightness(1);}
   100% {filter: brightness(0.5);}
}

@keyframes brighten {
   0% {filter: brightness(0.5);}
   100% {filter: brightness(1);}
}

.glow {
   animation-duration: 2s;
   -webkit-animation-duration: 2s;
   animation-fill-mode: both;
   animation-name: glow;
   -webkit-animation-name: glow;
}

.loop {
   animation-iteration-count: infinite;
   -webkit-animation-iteration-count: infinite;
}

@keyframes glow {
   0% {opacity: 1; box-shadow: 0 0 5px #fff;}
   10% {opacity: 0.9; box-shadow: 0 0 10px $active-glow-fg-1;}
   20% {opacity: 0.8; box-shadow: 0 0 20px $active-glow-fg-1;}
   30% {opacity: 0.7; box-shadow: 0 0 30px $active-glow-fg-1;}
   40% {opacity: 0.6; box-shadow: 0 0 40px $active-glow-fg-1;}
   50% {opacity: 0.5; box-shadow: 0 0 50px $active-glow-fg-1;}
   60% {opacity: 0.6; box-shadow: 0 0 40px $active-glow-fg-1;}
   70% {opacity: 0.7; box-shadow: 0 0 30px $active-glow-fg-1;}
   80% {opacity: 0.8; box-shadow: 0 0 20px $active-glow-fg-1;}
   90% {opacity: 0.9; box-shadow: 0 0 10px $active-glow-fg-1;}
   100% {opacity: 1; box-shadow: 0 0 5px #fff;}
}
