User:XOR/bg.css

.test {
position: absolute;
top: -30px;
left: -90px;
opacity: .1;
}

.ghost {
position: fixed;
bottom: 0;
left: 0;
opacity: 0;
animation-name: fade;
animation-duration: .5s;
animation-timing-function: linear;
animation-iteration-count: 1;
}

.spinner {
  
  animation-name: spin, depth, rainbow, size;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-duration: .5s;

  text-align: center;

}

.shaker {
	 animation-name: depth, rainbow, shake;
	 animation-timing-function: linear;
	 animation-iteration-count: infinite;
	 animation-duration: .1s;
}

.shifter{
	 animation-name: shift;
	 animation-timing-function: linear;
	 animation-iteration-count: infinite;
	 animation-duration: 2s;
	 font-size: 20px;
}

.font{
	 animation-name: fbont;
	 animation-timing-function: linear;
	 animation-iteration-count: infinite;
	 animation-duration: .5s;
}

.nuttytest{
	animation-name: nuts;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-duration: 1s;
}


@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}

@keyframes depth {
  0% { text-shadow: 0 0 violet; }
  25% { text-shadow: 1px 0 indigo, 2px 0 blue, 3px 0 orange, 4px 0 orange, 5px 0 red; }
  50% { text-shadow: 0 0 red; }
  75% { text-shadow: -1px 0 red, -2px 0 orange, -3px 0 orange, -4px 0 blue, -5px 0 black; }
  100% { text-shadow: 0 0 black; }
}

@keyframes rainbow{
 0%{color: orange;}
 10%{color: purple;}
 20%{color: red;}
 30%{color: CadetBlue;}
 40%{color: yellow;}
 50%{color: coral;}
 60%{color: green;}
 70%{color: cyan;}
 80%{color: DeepPink;}
 90%{color: DodgerBlue;}
 100%{color: orange;}
}

@keyframes size{

	0%{font-size: 60px;}
	10%{font-size: 50px;}
	20%{font-size: 40px;}
	30%{font-size: 30px;}
	40%{font-size: 20px;}
    50%{font-size: 10px;}
	60%{font-size: 5px;}
	70%{font-size: 10px;}
	80%{font-size: 20px;}
	85%{font-size: 30px;}
	90%{font-size: 50px;}
	100%{font-size: 60px;}

}


@keyframes shake{
 0% { transform: skewY(-25deg); }
 10% { transform: skewY(25deg); }
 30% { transform: skewY(-25deg); }
 50% { transform: skewY(25deg); }
 70% { transform: skewY(-25deg); }
 100% { transform: skewY(25deg); }
}

@keyframes shift{

	0%{ text-align: right;}
	50%{ text-align: center;}
	100%{ text-align: left;}
}

@keyframes fbont{

	0%{ font-family: Impact;}
	50%{ font-family: serif;}
	100%{ font-family: Fantasy;}
}

@keyframes fade{

	0%{ opacity: 1;}
	25%{ opacity: 0.75;}
	50%{ opacity: 0.5;}
	75%{ opacity: 0.25;}
	100%{ opacity: 0;}
}