h1 {
  margin: 0;
  width: 45%;
  line-height: 1;
  font-size: 8em;
  overflow: hidden;
  font-weight: bold;
  display: inline-block;
  font-family: sans-serif;
  text-transform: capitalize;
}

body {overflow: hidden;}

/* -- 1 -- */
@keyframes stripes {
  100% {
    background-position: 0 -50px;
  }
}
.stripes {
  background-repeat: repeat;
  background-size: 100% 50px;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: stripes 2s linear infinite;
  -webkit-animation: stripes 2s linear infinite;
  background-image: -webkit-linear-gradient(#F2CD00 50%, #F20000 50%);
} /* -- ./1 -- */

/* -- 2 -- */
@keyframes flash {
  0% {opacity: 1;}
  50% {opacity: 0;}
  100% {opacity: 1;}
}
.flash {
  animation: flash 2s linear infinite;
} /* -- ./2 -- */

/* -- 3 -- */
@keyframes slideIn {
  from {transform: translateY(-100%);}
  to {transform: translateY(0);}
}

.slide-in {
  animation: slideIn 2s infinite alternate;
} /* -- ./3 -- */

/* -- 4 -- */
@keyframes rotate {
  from {transform: rotate(0deg);}
  to {transform: rotate(360deg);}
}
.rotate {
  transform-origin: 30%;
  animation: rotate 2s linear infinite alternate;
} /* -- ./4 -- */

/* -- 5 -- */
@keyframes scale {
  from {transform: scale(1);}
  to {transform: scale(1.2);}
}
.scale {
  animation: scale 2s linear infinite alternate;
} /* -- ./5 -- */

/* -- 6 -- */
@keyframes blink {
  0% {opacity: 1;}
  49% {opacity: 1;}
  50% {opacity: 0;}
  100% {opacity: 0;}
}
.blink {
  animation: blink 2s linear infinite;
} /* -- ./6 -- */

/* -- 7 -- */
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
  40% {transform: translateY(-30px);}
  60% {transform: translateY(-15px);}
}
.bounce {
  animation: bounce 1s linear infinite;
} /* -- ./7 -- */

/* -- 8 -- */
@keyframes skew {
  from {transform: skew(0deg);}
  to {transform: skew(15deg);}
}
.skew {
  animation: skew 1s linear infinite alternate;
} /* -- ./8 -- */

/* -- 9 -- */
@keyframes translate {
  from {transform: translate(0, 0);}
  to {transform: translate(100px, 50px);}
}
.translate {
  animation: translate 1s linear infinite alternate;
} /* -- ./9 -- */

/* -- 10 -- */
@keyframes colorChange {
  from {color: black;}
  to {color: red;}
}
.colorChange {
  animation: colorChange 1s linear infinite alternate;
} /* -- ./10 -- */

/* -- 11 -- */
@keyframes gradient {
  from {background-image: linear-gradient(to right, red, yellow)}
  to {background-image: linear-gradient(to right, yellow, red)}
}
.gradient {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradient 1s linear infinite alternate;
} /* -- ./11 -- */