speedcoder99

My vid intro

@import url('https://fonts.googleapis.com/css2?family=Sigmar+One&display=swap');

body {
 font-family: Sigmar One;
 font-weight: bold;
 background-color: #177591;
 background: linear-gradient(27deg, #18ed00, #13bd00, #0f9100, #0d7301);
 background-size: 800% 800%;
 animation: background 2s 15;
}

h1 {
 display: block;
 color: white;
 font-size: 15px;
 text-align: center;
 white-space: nowrap;
 overflow: hidden;
 position: absolute;
 top: 50%;
 left: 50%;
 animation-name: first-spin, second-spin, grow-shrink, middle-up-down;
 animation-duration: 0.3s, 0.3s, 1s, 1s;
 animation-iteration-count: 5, 5, 2, 2;
 animation-delay: 0s, 2s, 4s, 6s;
 transform: translate(-50%,-75%);
 text-shadow: -2px 2px 0 #45cf36,2px 2px 0 #45cf36,2px -2px 0 #45cf36,-2px -2px 0 #45cf36;
}

img {
 display: none;
 width: 200px;
 height: 200px;
 position: absolute;
 top: 50%;
 left: 50%;
 border-radius: 50%;
 transform: translate(-50%,-75%);
 filter: grayscale(0%) sepia(0%) contrast(100%) saturate(100%);
 animation-name: grayscale-sepia, contrast, saturate;
 animation-duration: 2s, 2s, 2s;
 animation-iteration-count: 2, 2, 2;
 animation-delay: 0s, 4s, 8s;
 animation-play-state: paused;
}

@keyframes background {
 0% { background-position: 0% 43%; }
 50% { background-position: 100% 58%; }
 100% { background-position: 0% 43%; }
}

@keyframes first-spin {
 0% {
  transform: rotate(0deg) translate(-50%,-75%);
  left: 50%;
 }
 15% {
  transform: rotate(45deg) translate(-50%,-75%);
  left: 50%;
 }
 30% {
  transform: rotate(135deg) translate(-50%,-75%);
  left: 50%;
 }
 45% {
  transform: rotate(180deg) translate(-50%,-75%);
  left: 50%;
 }
 60% {
  transform: rotate(225deg) translate(-50%,-75%);
  left: 50%;
 }
 75% {
  transform: rotate(270deg) translate(-50%,-75%);
  left: 50%;
 }
 90% {
  transform: rotate(315deg) translate(-50%,-75%);
  left: 50%;
 }
 105% {
  transform: rotate(360deg) translate(-50%,-75%);
  left: 50%;
 }
}

@keyframes second-spin {
 0% {
  transform: rotate(-0deg) translate(-50%,-75%);
  left: 50%;
 }
 15% {
  transform: rotate(-45deg) translate(-50%,-75%);
  left: 50%;
 }
 30% {
  transform: rotate(-135deg) translate(-50%,-75%);
  left: 50%;
 }
 45% {
  transform: rotate(-180deg) translate(-50%,-75%);
  left: 50%;
 }
 60% {
  transform: rotate(-225deg) translate(-50%,-75%);
  left: 50%;
 }
 75% {
  transform: rotate(-270deg) translate(-50%,-75%);
  left: 50%;
 }
 90% {
  transform: rotate(-315deg) translate(-50%,-75%);
  left: 50%;
 }
 105% {
  transform: rotate(-360deg) translate(-50%,-75%);
  left: 50%;
 }
}

@keyframes grow-shrink {
 from {
  font-size: 15px;
 }
 to {
  font-size: 34.5px;
 }
}

@keyframes middle-up-down {
 0% {
  top: 50%;
  translateY(-75%);
 }
 50% {
  top: 0%;
  translateY(-75%);
 }
 100% {
  top: 90%;
  translateY(-75%);
 }
}

@keyframes grayscale-sepia {
 0% { filter: grayscale(0%); }
 25% { filter: grayscale(100%); }
 50% { filter: sepia(0%); }
 100% { filter: sepia(150%); }
}

@keyframes contrast {
 0% { filter: contrast(100%); }
 25% { filter: contrast(200%); }
 50% { filter: contrast(300%); }
 75% { filter: contrast(400%); }
}

@keyframes saturate {
 0% { filter: saturate(100%); }
 12% { filter: saturate(400%); }
 24% { filter: saturate(600%); }
 36% { filter: saturate(800%); }
 48% { filter: saturate(1000%); }
 60% { filter: saturate(1200%); }
 72% { filter: saturate(1400%); }
 84% { filter: saturate(1600%); }
 96% { filter: saturate(1800%); }
 100% { filter: saturate(2000%); }
}