jquery.msb.css

.msb > div.bar {
	position: absolute;
	bottom: 0;
	left: 0;
	display: block;
	height: 5px;
	width: 100%;
	border-top: 1px solid #fff;
}

/* ************************************
*  jquery-msb animations classes
*  ***********************************/

/* State Bar background anim classes */
.msb-anim-chameleon {
	background: linear-gradient(
		to right,
		#ff3535 0%,
		#ffb22d 8%,
		#f7df00 16%,
		#26ff6c 25%,
		#268bff 34%,
		#8b3cff 42%,
		#ff3535 50%,
		#ffb22d 58%,
		#f7df00 66%,
		#26ff6c 75%,
		#268bff 84%,
		#8b3cff 92%,
		#ff3535 100%
	);
	background-size: 200%;
	background-repeat: repeat-x;
	animation: msb-anim-progressing 1s linear infinite;
}
@keyframes msb-anim-progressing {
	0% {
		background-position: 0% 50%;
	}
	100% {
		background-position: 100% 50%;
	}
}

/* Icon anim classes */
.msb-anim-rotate, .msb-anim-spin {
  animation: msb-anim-rotate 1s infinite linear;
}
@keyframes msb-anim-rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.msb-anim-bounce {
  animation: msb-anim-bounce 1.5s infinite ease;
}
@keyframes msb-anim-bounce {
  0%, 10%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-0.2em);
  }
  60% {
    transform: translateY(-0.3em);
  }
}

.msb-anim-fly{
  opacity:1;
  transform: transform(0,0) rotateY(0deg) scale(1);
  animation: msb-anim-fly 1s infinite;
}
@keyframes msb-anim-fly{
  0%{
    transform: translate(0,0) rotateY(0deg) scale(1);
    opacity:1;
  }
  40%{
    transform: translate(1em,-.5em) rotateY(90deg) scale(.7);
    opacity:.81;		
  }
  60%{
    transform: translate(.2em,-.4em) rotateY(160deg) scale(.4);
    opacity:.71;
  }
  80%{
    transform: translate(-.8em,-.1em) rotateY(280deg) scale(.6);
    opacity:.91;
  }
  100%{
    transform: translate(-.3em,-.05em) rotateY(340deg) scale(.8);
    opacity:1;	
  }
}

.msb-anim-flash {
  animation: msb-anim-flash 1s ease infinite;
}
@keyframes msb-anim-flash {
  0%, 10%, 20%, 30%, 40%, 100% {
    opacity: 1;
  }
  4%, 14%, 24%, 34%, 90% {
    opacity: 0;
  }
}

.msb-anim-blink {
  animation: msb-anim-blink 2s ease infinite;
}
@keyframes msb-anim-blink {
  0%, 100%, 50% {
    opacity: 1;
  }
  25%, 75% {
    opacity: 0;
  }
}

.msb-anim-pass, .msb-anim-pass-ltr {
  animation: msb-anim-pass 1.5s linear infinite;
}
.msb-anim-pass-rtl, .msb-anim-pass-reverse {
  animation: msb-anim-pass-rtl 1.5s linear infinite;
}
@keyframes msb-anim-pass {
  0% {
    transform: translateX(-50%);
    opacity: 0;
  }
  50% {
    transform: translateX(0%);
    opacity: 1;
  }
  100% {
    transform: translateX(50%);
    opacity: 0;
  }
}
@keyframes msb-anim-pass-rtl {
  0% {
    transform: translateX(50%);
    opacity: 0;
  }
  50% {
    transform: translateX(0%);
    opacity: 1;
  }
  100% {
    transform: translateX(-50%);
    opacity: 0;
  }
}

.msb-anim-ring {
  animation: msb-anim-ring 2s ease infinite;
  transform-origin-x: 50%;
  transform-origin-y: 0px;
  transform-origin-z: initial;
}
@keyframes msb-anim-ring {
  0% {
    transform: rotate(-15deg);
  }
  2% {
    transform: rotate(15deg);
  }
  4%, 12% {
    transform: rotate(-18deg);
  }
  6%, 14% {
    transform: rotate(18deg);
  }
  8% {
    transform: rotate(-22deg);
  }
  10% {
    transform: rotate(22deg);
  }
  16% {
    transform: rotate(-12deg);
  }
  18% {
    transform: rotate(12deg);
  }
  20%, 100% {
    transform: rotate(0deg);
  }
}

.msb-anim-shake {
  transform-origin-x: 90%;
  transform-origin-y: 35%;
  transform-origin-z: initial;
  animation: msb-anim-shake 2.5s ease infinite;
}
@keyframes msb-anim-shake {
  0% {
    transform: rotate(-12deg);
  }
  8% {
    transform: rotate(12deg);
  }
  10%, 28%, 30%, 48%, 50%, 68% {
    transform: rotate(24deg);
  }
  18%, 20%, 38%, 40%, 58%, 60% {
    transform: rotate(-24deg);
  }
  75%, 100% {
    transform: rotate(0deg);
  }
}

.msb-anim-tada {
  animation: msb-anim-tada 2s linear infinite;
}
@keyframes msb-anim-tada {
  0% {
    transform: scale(1);
  }
  10%, 20% {
    transform: scale(.9) rotate(-8deg);
  }
  30%, 50%, 70% {
    transform: scale(1.3) rotate(8deg);
  }
  40%, 60% {
    transform: scale(1.3) rotate(-8deg);
  }
  80%, 100% {
    transform: scale(1) rotate(0);
  }
}

.msb-anim-burst {
  animation: msb-anim-burst 2s infinite linear;
}
@keyframes msb-anim-burst {
  0% {
    opacity: 0.8;
  }
  60% {
    transform: scale(1.8);
    opacity: 0.3;
  }
  100% {
    opacity: 0.1;
  }
}

.msb-anim-fall {
  animation: msb-anim-fall 2s linear infinite;
}
@keyframes msb-anim-fall {
  0% {
    transform: translateY(-50%);
    opacity: 0;
  }
  50% {
    transform: translateY(0%);
    opacity: 1;
  }
  100% {
    transform: translateY(50%);
    opacity: 0;
  }
}

.msb-anim-pulse {
  animation: msb-anim-pulse 1s linear infinite;
}
@keyframes msb-anim-pulse {
  0%, 50%, 100% {
    transform: scale(0.8);
  }
  30% {
    transform: scale(1.1);
  }
}