obnoxious.css

@keyframes fontalicious {
  0% {
    font-family: helvetica;
  }
  10% {
    font-family: times;
  }
  20% {
    font-family: fantasy;
  }
  30% {
    font-family: monospace;
  }
  40% {
    font-family: Palatino;
  }
  50% {
    font-family: Tahoma;
  }
  60% {
    font-family: impact;
  }
  70% {
    font-family: cursive;
  }
  80% {
    font-family: monospace;
  }
  90% {
    font-family: fantasy;
  }
  99% {
    font-family: futura;
  }
  100% {
  }
}

.fontalicious {
  animation-name: fontalicious;
  animation-iteration-count: 4;
  animation-duration: 1s;
}

/**
 * Animations
 */
.animated {
  animation-fill-mode: both;
}

/**
 * Intensifies
 * - Slowly increases in shaking and madness
 */
@keyframes intensifies {
  0% {
    transform: translate(1px, 1px) scale(1);
  }
  1% {
    transform: translate(-1px, -1px) scale(1.02);
  }
  2% {
    transform: translate(1px, 2px) scale(1.04);
  }
  3% {
    transform: translate(-3px, -1px) scale(1.06);
  }
  4% {
    transform: translate(3px, 3px) scale(1.08);
  }
  5% {
    transform: translate(-4px, -5px) scale(1.1);
  }
  6% {
    transform: translate(4px, 4px) scale(1.12);
  }
  7% {
    transform: translate(-1px, -2px) scale(1.14);
  }
  8% {
    transform: translate(5px, 1px) scale(1.16);
  }
  9% {
    transform: translate(-4px, -10px) scale(1.18);
  }
  10% {
    transform: translate(7px, 7px) scale(1.2);
  }
  11% {
    transform: translate(-8px, -7px) scale(1.22);
  }
  12% {
    transform: translate(1px, 8px) scale(1.24);
  }
  13% {
    transform: translate(-2px, -10px) scale(1.26);
  }
  14% {
    transform: translate(14px, 7px) scale(1.28);
  }
  15% {
    transform: translate(-14px, -6px) scale(1.3);
  }
  16% {
    transform: translate(2px, 6px) scale(1.32);
  }
  17% {
    transform: translate(-16px, -4px) scale(1.34);
  }
  18% {
    transform: translate(11px, 12px) scale(1.36);
  }
  19% {
    transform: translate(-4px, -17px) scale(1.38);
  }
  20% {
    transform: translate(12px, 7px) scale(1.4);
  }
  21% {
    transform: translate(-11px, -13px) scale(1.42);
  }
  22% {
    transform: translate(4px, 22px) scale(1.44);
  }
  23% {
    transform: translate(-13px, -24px) scale(1.46);
  }
  24% {
    transform: translate(23px, 5px) scale(1.48);
  }
  25% {
    transform: translate(-15px, -16px) scale(1.5);
  }
  26% {
    transform: translate(16px, 7px) scale(1.52);
  }
  27% {
    transform: translate(-25px, -11px) scale(1.54);
  }
  28% {
    transform: translate(25px, 20px) scale(1.56);
  }
  29% {
    transform: translate(-16px, -20px) scale(1.58);
  }
  30% {
    transform: translate(12px, 23px) scale(1.6);
  }
  31% {
    transform: translate(-15px, -18px) scale(1.62);
  }
  32% {
    transform: translate(3px, 27px) scale(1.64);
  }
  33% {
    transform: translate(-18px, -14px) scale(1.66);
  }
  34% {
    transform: translate(14px, 9px) scale(1.68);
  }
  35% {
    transform: translate(-28px, -23px) scale(1.7);
  }
  36% {
    transform: translate(12px, 30px) scale(1.72);
  }
  37% {
    transform: translate(-25px, -27px) scale(1.74);
  }
  38% {
    transform: translate(39px, 1px) scale(1.76);
  }
  39% {
    transform: translate(-10px, -32px) scale(1.78);
  }
  40% {
    transform: translate(15px, 35px) scale(1.8);
  }
  41% {
    transform: translate(-27px, -15px) scale(1.82);
  }
  42% {
    transform: translate(15px, 41px) scale(1.84);
  }
  43% {
    transform: translate(-39px, -4px) scale(1.86);
  }
  44% {
    transform: translate(34px, 19px) scale(1.88);
  }
  45% {
    transform: translate(-4px, -45px) scale(1.9);
  }
  46% {
    transform: translate(38px, 7px) scale(1.92);
  }
  47% {
    transform: translate(-21px, -1px) scale(1.94);
  }
  48% {
    transform: translate(19px, 6px) scale(1.96);
  }
  49% {
    transform: translate(-49px, -25px) scale(1.98);
  }
  50% {
    transform: translate(25px, 25px) scale(2);
  }
  51% {
    transform: translate(-33px, -24px) scale(2.02);
  }
  52% {
    transform: translate(45px, 36px) scale(2.04);
  }
  53% {
    transform: translate(-44px, -7px) scale(2.06);
  }
  54% {
    transform: translate(30px, 28px) scale(2.08);
  }
  55% {
    transform: translate(-4px, -27px) scale(2.1);
  }
  56% {
    transform: translate(17px, 18px) scale(2.12);
  }
  57% {
    transform: translate(-4px, -12px) scale(2.14);
  }
  58% {
    transform: translate(1px, 50px) scale(2.16);
  }
  59% {
    transform: translate(-8px, -36px) scale(2.18);
  }
  60% {
    transform: translate(29px, 26px) scale(2.2);
  }
  61% {
    transform: translate(-24px, -21px) scale(2.22);
  }
  62% {
    transform: translate(60px, 21px) scale(2.24);
  }
  63% {
    transform: translate(-9px, -36px) scale(2.26);
  }
  64% {
    transform: translate(44px, 1px) scale(2.28);
  }
  65% {
    transform: translate(-38px, -40px) scale(2.3);
  }
  66% {
    transform: translate(42px, 33px) scale(2.32);
  }
  67% {
    transform: translate(-17px, -45px) scale(2.34);
  }
  68% {
    transform: translate(1px, 17px) scale(2.36);
  }
  69% {
    transform: translate(-20px, -62px) scale(2.38);
  }
  70% {
    transform: translate(6px, 53px) scale(2.4);
  }
  71% {
    transform: translate(-64px, -14px) scale(2.42);
  }
  72% {
    transform: translate(67px, 48px) scale(2.44);
  }
  73% {
    transform: translate(-47px, -39px) scale(2.46);
  }
  74% {
    transform: translate(5px, 62px) scale(2.48);
  }
  75% {
    transform: translate(-29px, -50px) scale(2.5);
  }
  76% {
    transform: translate(5px, 60px) scale(2.52);
  }
  77% {
    transform: translate(-51px, -76px) scale(2.54);
  }
  78% {
    transform: translate(58px, 16px) scale(2.56);
  }
  79% {
    transform: translate(-79px, -32px) scale(2.58);
  }
  80% {
    transform: translate(41px, 22px) scale(2.6);
  }
  81% {
    transform: translate(-43px, -48px) scale(2.62);
  }
  82% {
    transform: translate(35px, 65px) scale(2.64);
  }
  83% {
    transform: translate(-65px, -84px) scale(2.66);
  }
  84% {
    transform: translate(62px, 73px) scale(2.68);
  }
  85% {
    transform: translate(-48px, -40px) scale(2.7);
  }
  86% {
    transform: translate(30px, 25px) scale(2.72);
  }
  87% {
    transform: translate(-16px, -46px) scale(2.74);
  }
  88% {
    transform: translate(81px, 73px) scale(2.76);
  }
  89% {
    transform: translate(-79px, -76px) scale(2.78);
  }
  90% {
    transform: translate(55px, 62px) scale(2.8);
  }
  91% {
    transform: translate(-44px, -56px) scale(2.82);
  }
  92% {
    transform: translate(46px, 91px) scale(2.84);
  }
  93% {
    transform: translate(-48px, -34px) scale(2.86);
  }
  94% {
    transform: translate(18px, 10px) scale(2.88);
  }
  95% {
    transform: translate(-11px, -4px) scale(2.9);
  }
  96% {
    transform: translate(14px, 80px) scale(2.92);
  }
  97% {
    transform: translate(-29px, -54px) scale(2.94);
  }
  98% {
    transform: translate(51px, 95px) scale(2.96);
  }
  99% {
    transform: translate(-71px, -4px) scale(2.98);
  }
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}

.intensifies {
  animation-timing-function: ease-out;
  transform-origin: bottom center;
  animation-name: intensifies;
  animation-duration: 5s;
}

/**
 * Animations
 */
.animated {
  animation-fill-mode: both;
}

/**
 * Intensifies
 * - Slowly increases in shaking and madness
 */
@keyframes shakeit {
  0% {
    transform: translate(0px, 0) rotate(0deg);
  }
  1% {
    transform: translate(-2px, 0) rotate(-1deg);
  }
  2% {
    transform: translate(4px, 0) rotate(2deg);
  }
  3% {
    transform: translate(-6px, 0) rotate(-3deg);
  }
  4% {
    transform: translate(8px, 0) rotate(4deg);
  }
  5% {
    transform: translate(-10px, 0) rotate(-5deg);
  }
  6% {
    transform: translate(12px, 0) rotate(6deg);
  }
  7% {
    transform: translate(-14px, 0) rotate(-7deg);
  }
  8% {
    transform: translate(16px, 0) rotate(8deg);
  }
  9% {
    transform: translate(-18px, 0) rotate(-9deg);
  }
  10% {
    transform: translate(20px, 0) rotate(8deg);
  }
  11% {
    transform: translate(-22px, 0) rotate(-8deg);
  }
  12% {
    transform: translate(24px, 0) rotate(8deg);
  }
  13% {
    transform: translate(-26px, 0) rotate(-8deg);
  }
  14% {
    transform: translate(28px, 0) rotate(8deg);
  }
  15% {
    transform: translate(-30px, 0) rotate(-8deg);
  }
  16% {
    transform: translate(32px, 0) rotate(8deg);
  }
  17% {
    transform: translate(-34px, 0) rotate(-8deg);
  }
  18% {
    transform: translate(36px, 0) rotate(8deg);
  }
  19% {
    transform: translate(-38px, 0) rotate(-8deg);
  }
  20% {
    transform: translate(40px, 0) rotate(8deg);
  }
  21% {
    transform: translate(-42px, 0) rotate(-8deg);
  }
  22% {
    transform: translate(44px, 0) rotate(8deg);
  }
  23% {
    transform: translate(-46px, 0) rotate(-8deg);
  }
  24% {
    transform: translate(48px, 0) rotate(8deg);
  }
  25% {
    transform: translate(-50px, 0) rotate(-8deg);
  }
  26% {
    transform: translate(52px, 0) rotate(8deg);
  }
  27% {
    transform: translate(-54px, 0) rotate(-8deg);
  }
  28% {
    transform: translate(56px, 0) rotate(8deg);
  }
  29% {
    transform: translate(-58px, 0) rotate(-8deg);
  }
  30% {
    transform: translate(60px, 0) rotate(8deg);
  }
  31% {
    transform: translate(-62px, 0) rotate(-8deg);
  }
  32% {
    transform: translate(64px, 0) rotate(8deg);
  }
  33% {
    transform: translate(-66px, 0) rotate(-8deg);
  }
  34% {
    transform: translate(68px, 0) rotate(8deg);
  }
  35% {
    transform: translate(-70px, 0) rotate(-8deg);
  }
  36% {
    transform: translate(72px, 0) rotate(8deg);
  }
  37% {
    transform: translate(-74px, 0) rotate(-8deg);
  }
  38% {
    transform: translate(76px, 0) rotate(8deg);
  }
  39% {
    transform: translate(-78px, 0) rotate(-8deg);
  }
  40% {
    transform: translate(80px, 0) rotate(8deg);
  }
  41% {
    transform: translate(-82px, 0) rotate(-8deg);
  }
  42% {
    transform: translate(84px, 0) rotate(8deg);
  }
  43% {
    transform: translate(-86px, 0) rotate(-8deg);
  }
  44% {
    transform: translate(88px, 0) rotate(8deg);
  }
  45% {
    transform: translate(-90px, 0) rotate(-8deg);
  }
  46% {
    transform: translate(92px, 0) rotate(8deg);
  }
  47% {
    transform: translate(-94px, 0) rotate(-8deg);
  }
  48% {
    transform: translate(96px, 0) rotate(8deg);
  }
  49% {
    transform: translate(-98px, 0) rotate(-8deg);
  }
  50% {
    transform: translate(100px, 0) rotate(8deg);
  }
  51% {
    transform: translate(-102px, 0) rotate(-8deg);
  }
  52% {
    transform: translate(104px, 0) rotate(8deg);
  }
  53% {
    transform: translate(-106px, 0) rotate(-8deg);
  }
  54% {
    transform: translate(108px, 0) rotate(8deg);
  }
  55% {
    transform: translate(-110px, 0) rotate(-8deg);
  }
  56% {
    transform: translate(112px, 0) rotate(8deg);
  }
  57% {
    transform: translate(-114px, 0) rotate(-8deg);
  }
  58% {
    transform: translate(116px, 0) rotate(8deg);
  }
  59% {
    transform: translate(-118px, 0) rotate(-8deg);
  }
  60% {
    transform: translate(120px, 0) rotate(8deg);
  }
  61% {
    transform: translate(-122px, 0) rotate(-8deg);
  }
  62% {
    transform: translate(124px, 0) rotate(8deg);
  }
  63% {
    transform: translate(-126px, 0) rotate(-8deg);
  }
  64% {
    transform: translate(128px, 0) rotate(8deg);
  }
  65% {
    transform: translate(-130px, 0) rotate(-8deg);
  }
  66% {
    transform: translate(132px, 0) rotate(8deg);
  }
  67% {
    transform: translate(-134px, 0) rotate(-8deg);
  }
  68% {
    transform: translate(136px, 0) rotate(8deg);
  }
  69% {
    transform: translate(-138px, 0) rotate(-8deg);
  }
  70% {
    transform: translate(140px, 0) rotate(8deg);
  }
  71% {
    transform: translate(-142px, 0) rotate(-8deg);
  }
  72% {
    transform: translate(144px, 0) rotate(8deg);
  }
  73% {
    transform: translate(-146px, 0) rotate(-8deg);
  }
  74% {
    transform: translate(148px, 0) rotate(8deg);
  }
  75% {
    transform: translate(-150px, 0) rotate(-8deg);
  }
  76% {
    transform: translate(152px, 0) rotate(8deg);
  }
  77% {
    transform: translate(-154px, 0) rotate(-8deg);
  }
  78% {
    transform: translate(156px, 0) rotate(8deg);
  }
  79% {
    transform: translate(-158px, 0) rotate(-8deg);
  }
  80% {
    transform: translate(160px, 0) rotate(8deg);
  }
  81% {
    transform: translate(-162px, 0) rotate(-8deg);
  }
  82% {
    transform: translate(164px, 0) rotate(8deg);
  }
  83% {
    transform: translate(-166px, 0) rotate(-8deg);
  }
  84% {
    transform: translate(168px, 0) rotate(8deg);
  }
  85% {
    transform: translate(-170px, 0) rotate(-8deg);
  }
  86% {
    transform: translate(172px, 0) rotate(8deg);
  }
  87% {
    transform: translate(-174px, 0) rotate(-8deg);
  }
  88% {
    transform: translate(176px, 0) rotate(8deg);
  }
  89% {
    transform: translate(-178px, 0) rotate(-8deg);
  }
  90% {
    transform: translate(180px, 0) rotate(8deg);
  }
  91% {
    transform: translate(-182px, 0) rotate(-8deg);
  }
  92% {
    transform: translate(184px, 0) rotate(8deg);
  }
  93% {
    transform: translate(-186px, 0) rotate(-8deg);
  }
  94% {
    transform: translate(188px, 0) rotate(8deg);
  }
  95% {
    transform: translate(-190px, 0) rotate(-8deg);
  }
  96% {
    transform: translate(192px, 0) rotate(8deg);
  }
  97% {
    transform: translate(-194px, 0) rotate(-8deg);
  }
  98% {
    transform: translate(196px, 0) rotate(8deg);
  }
  99% {
    transform: translate(-198px, 0) rotate(-8deg);
  }
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}

.shakeit {
  animation-timing-function: ease-in;
  transform-origin: bottom center;
  animation-name: shakeit;
  animation-duration: 12s;
}

@keyframes strobe {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  1% {
    opacity: 0;
    transform: scale(1.1);
  }
  2% {
    opacity: 1;
    transform: scale(1.2);
  }
  3% {
    opacity: 0;
    transform: scale(1.3);
  }
  4% {
    opacity: 1;
    transform: scale(1.4);
  }
  5% {
    opacity: 0;
    transform: scale(1.5);
  }
  6% {
    opacity: 1;
    transform: scale(1.6);
  }
  7% {
    opacity: 0;
    transform: scale(1.7);
  }
  8% {
    opacity: 1;
    transform: scale(1.8);
  }
  9% {
    opacity: 0;
    transform: scale(1.9);
  }
  10% {
    opacity: 1;
    transform: scale(2);
  }
  11% {
    opacity: 0;
    transform: scale(2.1);
  }
  12% {
    opacity: 1;
    transform: scale(2.2);
  }
  13% {
    opacity: 0;
    transform: scale(2.3);
  }
  14% {
    opacity: 1;
    transform: scale(2.4);
  }
  15% {
    opacity: 0;
    transform: scale(2.5);
  }
  16% {
    opacity: 1;
    transform: scale(2.6);
  }
  17% {
    opacity: 0;
    transform: scale(2.7);
  }
  18% {
    opacity: 1;
    transform: scale(2.8);
  }
  19% {
    opacity: 0;
    transform: scale(2.9);
  }
  20% {
    opacity: 1;
    transform: scale(3);
  }
  21% {
    opacity: 0;
    transform: scale(3.1);
  }
  22% {
    opacity: 1;
    transform: scale(3.2);
  }
  23% {
    opacity: 0;
    transform: scale(3.3);
  }
  24% {
    opacity: 1;
    transform: scale(3.4);
  }
  25% {
    opacity: 0;
    transform: scale(3.5);
  }
  26% {
    opacity: 1;
    transform: scale(3.6);
  }
  27% {
    opacity: 0;
    transform: scale(3.7);
  }
  28% {
    opacity: 1;
    transform: scale(3.8);
  }
  29% {
    opacity: 0;
    transform: scale(3.9);
  }
  30% {
    opacity: 1;
    transform: scale(4);
  }
  31% {
    opacity: 0;
    transform: scale(4.1);
  }
  32% {
    opacity: 1;
    transform: scale(4.2);
  }
  33% {
    opacity: 0;
    transform: scale(4.3);
  }
  34% {
    opacity: 1;
    transform: scale(4.4);
  }
  35% {
    opacity: 0;
    transform: scale(4.5);
  }
  36% {
    opacity: 1;
    transform: scale(4.6);
  }
  37% {
    opacity: 0;
    transform: scale(4.7);
  }
  38% {
    opacity: 1;
    transform: scale(4.8);
  }
  39% {
    opacity: 0;
    transform: scale(4.9);
  }
  40% {
    opacity: 1;
    transform: scale(5);
  }
  41% {
    opacity: 0;
    transform: scale(5.1);
  }
  42% {
    opacity: 1;
    transform: scale(5.2);
  }
  43% {
    opacity: 0;
    transform: scale(5.3);
  }
  44% {
    opacity: 1;
    transform: scale(5.4);
  }
  45% {
    opacity: 0;
    transform: scale(5.5);
  }
  46% {
    opacity: 1;
    transform: scale(5.6);
  }
  47% {
    opacity: 0;
    transform: scale(5.7);
  }
  48% {
    opacity: 1;
    transform: scale(5.8);
  }
  49% {
    opacity: 0;
    transform: scale(5.9);
  }
  50% {
    opacity: 1;
    transform: scale(6);
  }
  51% {
    opacity: 0;
    transform: scale(6.1);
  }
  52% {
    opacity: 1;
    transform: scale(6.2);
  }
  53% {
    opacity: 0;
    transform: scale(6.3);
  }
  54% {
    opacity: 1;
    transform: scale(6.4);
  }
  55% {
    opacity: 0;
    transform: scale(6.5);
  }
  56% {
    opacity: 1;
    transform: scale(6.6);
  }
  57% {
    opacity: 0;
    transform: scale(6.7);
  }
  58% {
    opacity: 1;
    transform: scale(6.8);
  }
  59% {
    opacity: 0;
    transform: scale(6.9);
  }
  60% {
    opacity: 1;
    transform: scale(7);
  }
  61% {
    opacity: 0;
    transform: scale(7.1);
  }
  62% {
    opacity: 1;
    transform: scale(7.2);
  }
  63% {
    opacity: 0;
    transform: scale(7.3);
  }
  64% {
    opacity: 1;
    transform: scale(7.4);
  }
  65% {
    opacity: 0;
    transform: scale(7.5);
  }
  66% {
    opacity: 1;
    transform: scale(7.6);
  }
  67% {
    opacity: 0;
    transform: scale(7.7);
  }
  68% {
    opacity: 1;
    transform: scale(7.8);
  }
  69% {
    opacity: 0;
    transform: scale(7.9);
  }
  70% {
    opacity: 1;
    transform: scale(8);
  }
  71% {
    opacity: 0;
    transform: scale(8.1);
  }
  72% {
    opacity: 1;
    transform: scale(8.2);
  }
  73% {
    opacity: 0;
    transform: scale(8.3);
  }
  74% {
    opacity: 1;
    transform: scale(8.4);
  }
  75% {
    opacity: 0;
    transform: scale(8.5);
  }
  76% {
    opacity: 1;
    transform: scale(8.6);
  }
  77% {
    opacity: 0;
    transform: scale(8.7);
  }
  78% {
    opacity: 1;
    transform: scale(8.8);
  }
  79% {
    opacity: 0;
    transform: scale(8.9);
  }
  80% {
    opacity: 1;
    transform: scale(9);
  }
  81% {
    opacity: 0;
    transform: scale(9.1);
  }
  82% {
    opacity: 1;
    transform: scale(9.2);
  }
  83% {
    opacity: 0;
    transform: scale(9.3);
  }
  84% {
    opacity: 1;
    transform: scale(9.4);
  }
  85% {
    opacity: 0;
    transform: scale(9.5);
  }
  86% {
    opacity: 1;
    transform: scale(9.6);
  }
  87% {
    opacity: 0;
    transform: scale(9.7);
  }
  88% {
    opacity: 1;
    transform: scale(9.8);
  }
  89% {
    opacity: 0;
    transform: scale(9.9);
  }
  90% {
    opacity: 1;
    transform: scale(10);
  }
  91% {
    opacity: 0;
    transform: scale(10.1);
  }
  92% {
    opacity: 1;
    transform: scale(10.2);
  }
  93% {
    opacity: 0;
    transform: scale(10.3);
  }
  94% {
    opacity: 1;
    transform: scale(10.4);
  }
  95% {
    opacity: 0;
    transform: scale(10.5);
  }
  96% {
    opacity: 1;
    transform: scale(10.6);
  }
  97% {
    opacity: 0;
    transform: scale(10.7);
  }
  98% {
    opacity: 1;
    transform: scale(10.8);
  }
  99% {
    opacity: 0;
    transform: scale(10.9);
  }
  100% {
    opacity: 1;
    transform: 1;
  }
}

.strobe {
  animation-timing-function: ease-in-out;
  animation-name: strobe;
  animation-duration: 6s;
}

@keyframes twister {
  0% {
    transform: rotateZ(0deg);
  }
  10% {
    transform: rotateZ(360deg);
  }
  20% {
    transform: rotateZ(720deg);
  }
  30% {
    transform: rotateZ(1080deg);
  }
  40% {
    transform: rotateZ(1440deg);
  }
  50% {
    transform: rotateZ(1800deg);
  }
  60% {
    transform: rotateZ(2160deg);
  }
  70% {
    transform: rotateZ(2520deg);
  }
  80% {
  }
  90% {
  }
  100% {
  }
}

.twister {
  animation-name: twister;
  animation-duration: 5s;
  z-index: 1000;
}