we.type | MR_text-jello

<!--.:◂◀▸v▶¤◀v∫∫v▶¤◀v∫∫‡####‡‡‡‡###‡‡‡###‡‡####‡∫∫v▶¤◀v∫∫v▶¤◀v◂▶▸:.
|                                                                 |
|                Filename : MR_text-jello.html                    |
|                  Author : Maik Reinke                           |
|                                                                 |
::◂◀▸v▶¤◀v∫∫v▶¤‡‡##‡‡‡‡‡‡‡‡###‡‡###‡‡‡‡##‡‡‡‡##‡‡¤◀v∫∫v▶¤◀v◂▶▸::-->

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Jello</title>

  <style>
    @font-face {
      font-family: Konsole;
      src: url(../_fonts/Konsolev1.1-VF.ttf);
    }

    body {
      font-family: Konsole;
      font-size: 8vh;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      height: 100vh;
    }

    .class-1 {
      /* combines animation properties into a single property */
      animation: jello-vertical 1.5s ease infinite;
    }

    @keyframes jello-vertical {
      /* defines how the text moves at a certain point in the animation */
      0% {
        transform: scale3d(1, 1, 1);
      }

      30% {
        transform: scale3d(0.75, 1.25, 1);
      }

      40% {
        transform: scale3d(1.25, 0.75, 1);
      }

      50% {
        transform: scale3d(0.85, 1.15, 1);
      }

      65% {
        transform: scale3d(1.05, 0.95, 1);
      }

      75% {
        transform: scale3d(0.95, 1.05, 1);
      }

      100% {
        transform: scale3d(1, 1, 1);
      }
    }

    .class-2 {
      /* combines six of the animation properties into a single property */
      animation: jello-horizontal 1.5s ease infinite;
    }

    @keyframes jello-horizontal {
      /* defines how the text moves at a certain point in the animation */
      0% {
        transform: scale3d(1, 1, 1);
      }

      30% {
        transform: scale3d(1.25, 0.75, 1);
      }

      40% {
        transform: scale3d(0.75, 1.25, 1);
      }

      50% {
        transform: scale3d(1.15, 0.85, 1);
      }

      65% {
        transform: scale3d(0.95, 1.05, 1);
      }

      75% {
        transform: scale3d(1.05, 0.95, 1);
      }

      100% {
        transform: scale3d(1, 1, 1);
      }
    }

    .class-3 {
      /* combines six of the animation properties into a single property */
      animation: jello-diagonal 1.5s ease infinite;
    }

    @keyframes jello-diagonal {
      /* defines how the text moves at a certain point in the animation */
      0% {
        transform: skew(0deg 0deg);
      }

      30% {
        transform: skew(25deg 25deg);
      }

      40% {
        transform: skew(-15deg, -15deg);
      }

      50% {
        transform: skew(15deg, 15deg);
      }

      65% {
        transform: skew(-5deg, -5deg);
      }

      75% {
        transform: skew(5deg, 5deg);
      }

      100% {
        transform: skew(0deg 0deg);
      }
    }
  </style>
</head>

<body>
  <p class="class-1">Jello Vertical</p>
  <p class="class-2">Jello Horizontal</p>
  <p class="class-3">Jello Diagonal</p>
</body>
</html>