Template:Template:Annoying.css on wheels: Difference between revisions

Revision as of 15:42, 2 July 2023

* {
 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. */

/*I'll delete this, there are several problems with it. For the edit history:
1. hiding the text and putting baby can go out of sync. Syncing animations is not something browsers try very hard at.
2. Can't apply the hiding animation in combination with other animation effects for the page. Combining animations seems impossible? */
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);
    
  }
}