we.type | LA_shooting-letters

<!--.:◂◀▸v▶¤◀v∫∫v▶¤◀v∫∫‡####‡‡‡‡###‡‡‡###‡‡####‡∫∫v▶¤◀v∫∫v▶¤◀v◂▶▸:.
|                                                                 |
|                Filename : LA_falling-letters.html               |
|                  Author : Leonard Anders                        |
|                                                                 |
::◂◀▸v▶¤◀v∫∫v▶¤‡‡##‡‡‡‡‡‡‡‡###‡‡###‡‡‡‡##‡‡‡‡##‡‡¤◀v∫∫v▶¤◀v◂▶▸::-->

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>shooting-letters</title>
  <style>
    @font-face {
      font-family: Konsole;
      src: url(../_fonts/Konsolev1.1-VF.ttf);
    }

    body {
      font-family: Konsole;
      font-size: 10vh;
      overflow: hidden;
    }

    .parent-class {
      position: relative;
      transform: translate(48vw, 42vh);
    }
    /* describes the name of the first "peng" animation */
    .div-class-1 {
      /* sets the position of the "peng" animation */
      position: absolute;
      top: -0.91em;
      left: 0.73em;
    }
    /* describes the name of the second "oow" animation */
    .div-class-2 {
      /* sets the position of the "oow" animation and the rotation of the letters*/
      position: absolute;
      transform-origin: bottom;
      transform: rotate(180deg);
      top: -1.25em;
      left: -4.65em;
    }
    /* describes the name of the first "p" animation */
    .class-1 {
      /* sets the size of the "p" animation and the rotation of the letter */
      animation: rotation-animation 7s cubic-bezier(0.455, 0.030, 0.515, 0.955) 0s infinite;
      display: inline-block;
      transform-origin: bottom left;
    }
    /* describes the name of the letter "e" animation */
    .class-2 {
      /* sets the size of the "e" animation */
      font-size: 1.1em;
      /* sets the opacity of the "e" animation, its duration and repeats */
      animation: opacity-animation1 7s linear infinite;
    }
    /* describes the name of the letter "n" animation */
    .class-3 {
      /* sets the size of the "n" letter */
      font-size: 1.3em;
      /* sets the opacity of the "n" animation, its duration and repeats */
      animation: opacity-animation2 7s linear infinite;
    }
    /* describes the name of the letter "g" animation */
    .class-4 {
      /* sets the size of the "g" letter */
      font-size: 1.8em;
      /* sets the opacity of the "g" animation, its duration and repeats */
      animation: opacity-animation3 7s linear infinite;
    }
    /* describes the name of the letter "!" animation */
    .class-5 {
      /* sets the size of the "!" letter */
      font-size: 2em;
      /* sets the opacity of the "!" animation, its duration and repeats */
      animation: opacity-animation4 7s linear infinite;
    }
    /* describes the name of the letter "o" animation */
    .class-6 {
      /* sets the size of the "o" letter */
      font-size: 1.1em;
      /* sets the opacity of the "o" animation at the beginning, its duration and repeats */
      opacity: 0%;
      animation: opacity-animation1 7s linear 3.5s infinite;
    }
    /* describes the name of the letter "o" animation */
    .class-7 {
      /* sets the size of the "o" letter */
      font-size: 1.3em;
      /* sets the opacity of the "o" animation at the beginning, its duration and repeats */
      opacity: 0%;
      animation: opacity-animation2 7s linear 3.5s infinite;
    }
    /* describes the name of the letter "w" animation */
    .class-8 {
      /* sets the size of the "w" letter */
      font-size: 1.8em;
      /* sets the opacity of the "w" animation at the beginning, its duration and repeats */
      opacity: 0%;
      animation: opacity-animation3 7s linear 3.5s infinite;
    }
    /* describes the name of the letter "!" animation */
    .class-9 {
      /* sets the size of the "!" letter */
      font-size: 2em;
      /* sets the opacity of the "!" animation at the beginning, its duration and repeats */
      opacity: 0%;
      animation: opacity-animation4 7s linear 3.5s infinite;
    }
    /* describes the rotation of the letter "p" */
    @keyframes rotation-animation {
      0%,
      43% {
        transform: rotate(0deg);
      }

      48% {
        transform: rotate(-220deg);
      }

      50%,
      93% {
        transform: rotate(-180deg);
      }

      98% {
        transform: rotate(-400deg);
      }

      100% {
        transform: rotate(-360deg);
      }
    }
    /* describes the opacity of the letters "e" and "o" */
    @keyframes opacity-animation1 {
      0% {
        opacity: 0%;
      }

      1.5%,
      42.5% {
        opacity: 100%;
      }

      44%,
      100% {
        opacity: 0%;
      }
    }
    /* describes the opacity and rotation of the letters "n" and "o" */
    @keyframes opacity-animation2 {
      0%,
      1% {
        opacity: 0%;
      }

      2.5%,
      41.5% {
        opacity: 100%;
      }

      43%,
      100% {
        opacity: 0%;
      }
    }
    /* describes the opacity and rotation of the letters "g" and "w" */
    @keyframes opacity-animation3 {
      0%,
      2% {
        opacity: 0%;
      }

      3.5%,
      40.5% {
        opacity: 100%;
      }

      42%,
      100% {
        opacity: 0%;
      }
    }
    /* describes the opacity and rotation animation of the "!" */
    @keyframes opacity-animation4 {
      0%,
      3% {
        opacity: 0%;
      }

      4.5%,
      39.5% {
        opacity: 100%;
      }

      41%,
      100% {
        opacity: 0%;
      }
    }
  </style>
</head>

<body>
  <div class="parent-class">
    <span class="class-1">p</span>
    <div class="div-class-1">
      <span class="class-2">e</span>
      <span class="class-3">n</span>
      <span class="class-4">g</span>
      <span class="class-5">!</span>
    </div>
    <div class="div-class-2">
      <span class="class-6">o</span>
      <span class="class-7">o</span>
      <span class="class-8">w</span>
      <span class="class-9">!</span>
    </div>
  </div>
</body>

</html>