Template:Template:Annoying.css on wheels

* {
 animation:20s ease-in-out 1s infinite alternate fade, 3s ease-in-out infinite alternate noglasses, 2000s linear infinite spin !important;
}

@keyframes noglasses {
  from {
    filter: blur(.7px); }
  50% {
    filter:blur(0px)
  }
  55% {
    filter:blur(1px)
  }
  70%{
    filter:blur(0px)
  }
  75% { filter:blur(.6px)}
  82% { filter:blur(0px)}
  to {
    filter: blur(2px);
  }
}
@keyframes fade {
 from {
  opacity:0;
  filter: blur(10px);
 }
 10% {
  opacity:1;
 }
}
@keyframes spin {
 from {
  transform:rotate(360deg)
 }
 to {
  transform:rotate(0deg)
 }
}

/* Flashes the word baby by replacing a number of elements in the page with it */
/* Originally I wanted to replace words from the articles with baby, but that against hope, is impossible with CSS and only possible with Javascript.
I don't think a common user like me can write javascript in the wiki, it was a small miracle I found a way to do CSS. */
p:before {
 content:"";
 animation:2s linear infinite put-baby;
 animation-delay:5s;
   animation-timing-function: steps(3, jump-both);
  
  display: inline-block;
  transform:scale(2, 1);
  transform-origin: center left
}
p {
 animation:2s linear infinite hide-text;
 animation-delay:5s;
  animation-timing-function: steps(3, jump-both);
}
@keyframes put-baby {
 from {
  content:"";
   /* This stops a keyframe from interpolating the property into the next, making it hold until snapping to the next keyframe.
   I use this a lot in the lines below*/
   animation-timing-function: steps(1, end);
 }
 50% {
  content:"baby";
   font-size: 1rem;
   animation-timing-function: steps(1, end);
 }
  to {
    content: "";
    animation-timing-function: steps(1, end);
  }
}
@keyframes hide-text {
 from {
   font-size:revert;
   animation-timing-function: steps(1, end);
 }
 50% {
  font-size:.1px;
   animation-timing-function: steps(1, end);
 }
  to {
    font-size:revert;
    animation-timing-function: steps(1, end);
    
  }
}