Create an Account

It's free and you have access to premium codes!

Password must be a minimum length of 8, with at least one uppercase, one lowercase, one number, and one special character.

Login

Welcome back! Please login to your account.

Recover Account

Don't worry, we'll send you a message to help you to recover your acount.

Message Received!

We will get back to you as soon as possible.

Account Created!

Please check your email for instructions to activate your account.

All
Hello
Popular Sites
JavaScript Best Codes
Html Free Codes
Html5 Free Codes
Php Best Codes
Developer Codes
Free Frontend
Social Media
Twitter Page
Youtube Channel
Instagram Channel
Support
Contact Us
About Html Best Codes
Not a member? Sign Up

Various Dynamic Text Effects - Part 2

Written by @kerixa 19 May 2020

Supplementary to the previous script, more dynamic text effects have been included here. Like the other effects, the texts remain texts and you should not worry about Google indexing your site.

Code Snippet:

                                                
                                                <!-- this script is provided by https://www.htmlbestcodes.com coded by: Kerixa Inc. -->
<link href="https://fonts.googleapis.com/css?family=Lexend+Deca&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<style>
/* Recommended styles for Splitting */
.splitting .word,
.splitting .char {
  display: inline-block;
}

/* Psuedo-element chars */
.splitting .char {
  position: relative;
}

/**
 * Populate the psuedo elements with the character to allow for expanded effects
 * Set to `display: none` by default; just add `display: block` when you want
 * to use the psuedo elements
 */
.splitting .char::before,
.splitting .char::after {
  content: attr(data-char);
  position: absolute;
  top: 0;
  left: 0;
  visibility: hidden;
  transition: inherit;
  user-select: none;
}

/* Expanded CSS Variables */

.splitting {
  /* The center word index */
  --word-center: calc((var(--word-total) - 1) / 2);

  /* The center character index */
  --char-center: calc((var(--char-total) - 1) / 2);

  /* The center character index */
  --line-center: calc((var(--line-total) - 1) / 2);
}

.splitting .word {
  /* Pecent (0-1) of the word's position */
  --word-percent: calc(var(--word-index) / var(--word-total));

  /* Pecent (0-1) of the line's position */
  --line-percent: calc(var(--line-index) / var(--line-total));
}

.splitting .char {
  /* Percent (0-1) of the char's position */
  --char-percent: calc(var(--char-index) / var(--char-total));

  /* Offset from center, positive & negative */
  --char-offset: calc(var(--char-index) - var(--char-center));

  /* Absolute distance from center, only positive */
  --distance: calc(
     (var(--char-offset) * var(--char-offset)) / var(--char-center)
  );

  /* Distance from center where -1 is the far left, 0 is center, 1 is far right */
  --distance-sine: calc(var(--char-offset) / var(--char-center));

  /* Distance from center where 1 is far left/far right, 0 is center */
  --distance-percent: calc((var(--distance) / var(--char-center)));
}
* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

.container {
  max-height: 100vh;
}

.headline {
  -webkit-box-align: center;
          align-items: center;
  background-color: var(--color);
  display: -webkit-box;
  display: flex;
  font-family: 'Lexend Deca', sans-serif;
  font-weight: 700;
  font-size: calc(1rem + 1vmin);
  height: 15vh;
  -webkit-box-pack: center;
          justify-content: center;
  overflow: hidden;
  -webkit-perspective: 1000px;
          perspective: 1000px;
  scroll-snap-align: start;
  width: 100vw;
}
.headline:nth-child(1) {
  --color: #f9ca24;
}
.headline:nth-child(2) {
  --color: #3498db;
}
.headline:nth-child(3) {
  --color: #ff7979;
}
.headline:nth-child(4) {
  --color: #1abc9c;
}
.headline:nth-child(5) {
  --color: #e74c3c;
}
.headline:nth-child(6) {
  --color: #f8c291;
}

.word,
.char {
  -webkit-animation-delay: var(--del);
          animation-delay: var(--del);
  -webkit-animation-direction: var(--dir, normal);
          animation-direction: var(--dir, normal);
  -webkit-animation-duration: var(--dur);
          animation-duration: var(--dur);
  -webkit-animation-iteration-count: var(--it, infinite);
          animation-iteration-count: var(--it, infinite);
  -webkit-animation-name: var(--name);
          animation-name: var(--name);
  -webkit-animation-timing-function: var(--tf);
          animation-timing-function: var(--tf);
  -webkit-animation-fill-mode: var(--fill, forwards);
          animation-fill-mode: var(--fill, forwards);
  display: inline-block;
  position: relative;
  -webkit-transform-origin: 50% 100%;
          transform-origin: 50% 100%;
  z-index: 1;
}

.headline--fall .char {
  --name: fall;
  --dur: 600ms;
  --del: calc(var(--char-index) * -0.05s);
  --tf: cubic-bezier(0.165, 0.44, 0.64, 1);
}
@-webkit-keyframes fall {
  0% {
    -webkit-transform: rotateY(-25deg);
            transform: rotateY(-25deg);
  }
  25% {
    -webkit-transform: translateY(2%) rotateY(25deg);
            transform: translateY(2%) rotateY(25deg);
  }
  50% {
    -webkit-transform: rotateY(-25deg);
            transform: rotateY(-25deg);
  }
  75% {
    -webkit-transform: translateY(4%) rotateY(25deg);
            transform: translateY(4%) rotateY(25deg);
  }
  100% {
    -webkit-transform: rotateY(-25deg);
            transform: rotateY(-25deg);
  }
}
@keyframes fall {
  0% {
    -webkit-transform: rotateY(-25deg);
            transform: rotateY(-25deg);
  }
  25% {
    -webkit-transform: translateY(2%) rotateY(25deg);
            transform: translateY(2%) rotateY(25deg);
  }
  50% {
    -webkit-transform: rotateY(-25deg);
            transform: rotateY(-25deg);
  }
  75% {
    -webkit-transform: translateY(4%) rotateY(25deg);
            transform: translateY(4%) rotateY(25deg);
  }
  100% {
    -webkit-transform: rotateY(-25deg);
            transform: rotateY(-25deg);
  }
}
.headline--flip .char {
  --name: flip;
  --dur: 4000ms;
  --del: calc(var(--char-index) * 0.075s);
  --tf: linear;
}
@-webkit-keyframes flip {
  5% {
    -webkit-transform: rotateX(1turn);
            transform: rotateX(1turn);
  }
  10% {
    -webkit-transform: rotateX(2turn);
            transform: rotateX(2turn);
  }
  20% {
    -webkit-transform: rotateX(3turn);
            transform: rotateX(3turn);
  }
  40% {
    -webkit-transform: rotateX(4turn);
            transform: rotateX(4turn);
  }
  70%, 100% {
    -webkit-transform: rotateX(5turn);
            transform: rotateX(5turn);
  }
}
@keyframes flip {
  5% {
    -webkit-transform: rotateX(1turn);
            transform: rotateX(1turn);
  }
  10% {
    -webkit-transform: rotateX(2turn);
            transform: rotateX(2turn);
  }
  20% {
    -webkit-transform: rotateX(3turn);
            transform: rotateX(3turn);
  }
  40% {
    -webkit-transform: rotateX(4turn);
            transform: rotateX(4turn);
  }
  70%, 100% {
    -webkit-transform: rotateX(5turn);
            transform: rotateX(5turn);
  }
}
.headline--float .char {
  --name: float;
  --dur: 2200ms;
  --del: calc(var(--char-index) * -0.5s);
  --tf: ease-in-out;
  --dir: alternate;
}
.headline--float .char:nth-child(2n) {
  --name: float-alt;
}
@-webkit-keyframes float {
  from {
    -webkit-transform: translate(2%, -10%) rotate(-1deg);
            transform: translate(2%, -10%) rotate(-1deg);
  }
  to {
    -webkit-transform: translate(-2%, 5%) rotate(3deg);
            transform: translate(-2%, 5%) rotate(3deg);
  }
}
@keyframes float {
  from {
    -webkit-transform: translate(2%, -10%) rotate(-1deg);
            transform: translate(2%, -10%) rotate(-1deg);
  }
  to {
    -webkit-transform: translate(-2%, 5%) rotate(3deg);
            transform: translate(-2%, 5%) rotate(3deg);
  }
}
@-webkit-keyframes float-alt {
  from {
    -webkit-transform: translate(0%, -5%) rotate(-1deg);
            transform: translate(0%, -5%) rotate(-1deg);
  }
  to {
    -webkit-transform: translate(2%, 10%) rotate(3deg);
            transform: translate(2%, 10%) rotate(3deg);
  }
}
@keyframes float-alt {
  from {
    -webkit-transform: translate(0%, -5%) rotate(-1deg);
            transform: translate(0%, -5%) rotate(-1deg);
  }
  to {
    -webkit-transform: translate(2%, 10%) rotate(3deg);
            transform: translate(2%, 10%) rotate(3deg);
  }
}
.headline--jog .char {
  --name: jog;
  --dur: 500ms;
  --del: calc(var(--char-index) * -0.025s);
  --tf: linear;
}
@-webkit-keyframes jog {
  0% {
    -webkit-transform: translate(0, 0) rotate(5deg);
            transform: translate(0, 0) rotate(5deg);
  }
  25% {
    -webkit-transform: translate(5%, -5%) rotate(10deg);
            transform: translate(5%, -5%) rotate(10deg);
  }
  50% {
    -webkit-transform: translate(5%, 0) rotate(15deg);
            transform: translate(5%, 0) rotate(15deg);
  }
  75% {
    -webkit-transform: translate(10%, -5%) rotate(10deg);
            transform: translate(10%, -5%) rotate(10deg);
  }
  100% {
    -webkit-transform: translate(0, 0) rotate(5deg);
            transform: translate(0, 0) rotate(5deg);
  }
}
@keyframes jog {
  0% {
    -webkit-transform: translate(0, 0) rotate(5deg);
            transform: translate(0, 0) rotate(5deg);
  }
  25% {
    -webkit-transform: translate(5%, -5%) rotate(10deg);
            transform: translate(5%, -5%) rotate(10deg);
  }
  50% {
    -webkit-transform: translate(5%, 0) rotate(15deg);
            transform: translate(5%, 0) rotate(15deg);
  }
  75% {
    -webkit-transform: translate(10%, -5%) rotate(10deg);
            transform: translate(10%, -5%) rotate(10deg);
  }
  100% {
    -webkit-transform: translate(0, 0) rotate(5deg);
            transform: translate(0, 0) rotate(5deg);
  }
}
.headline--jump .char {
  --name: jump;
  --dur: 800ms;
  --del: calc(var(--char-index) * 0.075s);
  --tf: cubic-bezier(0.165, 0.44, 0.64, 1);
}
@-webkit-keyframes jump {
  20% {
    -webkit-transform: translateY(2%) scaleY(0.9);
            transform: translateY(2%) scaleY(0.9);
  }
  40% {
    -webkit-transform: translateY(-100%) scaleY(1.2);
            transform: translateY(-100%) scaleY(1.2);
  }
  50% {
    -webkit-transform: translateY(10%) scaleY(0.8);
            transform: translateY(10%) scaleY(0.8);
  }
  70% {
    -webkit-transform: translateY(-5%) scaleY(1);
            transform: translateY(-5%) scaleY(1);
  }
  80%, 100% {
    -webkit-transform: translateY(0) scaleY(1);
            transform: translateY(0) scaleY(1);
  }
}
@keyframes jump {
  20% {
    -webkit-transform: translateY(2%) scaleY(0.9);
            transform: translateY(2%) scaleY(0.9);
  }
  40% {
    -webkit-transform: translateY(-100%) scaleY(1.2);
            transform: translateY(-100%) scaleY(1.2);
  }
  50% {
    -webkit-transform: translateY(10%) scaleY(0.8);
            transform: translateY(10%) scaleY(0.8);
  }
  70% {
    -webkit-transform: translateY(-5%) scaleY(1);
            transform: translateY(-5%) scaleY(1);
  }
  80%, 100% {
    -webkit-transform: translateY(0) scaleY(1);
            transform: translateY(0) scaleY(1);
  }
}
.headline--twirl .char {
  --name: twirl;
  --dur: 6000ms;
  --del: calc(var(--char-index) * 0.025s);
  --tf: linear;
}
@-webkit-keyframes twirl {
  2.5% {
    -webkit-transform: rotateY(1turn);
            transform: rotateY(1turn);
  }
  5% {
    -webkit-transform: rotateY(2turn);
            transform: rotateY(2turn);
  }
  10% {
    -webkit-transform: rotateY(3turn);
            transform: rotateY(3turn);
  }
  20% {
    -webkit-transform: rotateY(4turn);
            transform: rotateY(4turn);
  }
  40% {
    -webkit-transform: rotateY(5turn);
            transform: rotateY(5turn);
  }
  70%, 100% {
    -webkit-transform: rotateY(6turn);
            transform: rotateY(6turn);
  }
}
@keyframes twirl {
  2.5% {
    -webkit-transform: rotateY(1turn);
            transform: rotateY(1turn);
  }
  5% {
    -webkit-transform: rotateY(2turn);
            transform: rotateY(2turn);
  }
  10% {
    -webkit-transform: rotateY(3turn);
            transform: rotateY(3turn);
  }
  20% {
    -webkit-transform: rotateY(4turn);
            transform: rotateY(4turn);
  }
  40% {
    -webkit-transform: rotateY(5turn);
            transform: rotateY(5turn);
  }
  70%, 100% {
    -webkit-transform: rotateY(6turn);
            transform: rotateY(6turn);
  }
}
.headline:nth-child(1) {
  --color: #e74c3c;
}
.headline:nth-child(2) {
  --color: #f5f6fa;
}
.headline:nth-child(3) {
  --color: #48dbfb;
}
.headline:nth-child(4) {
  --color: #9980FA;
}
.headline:nth-child(5) {
  --color: #F79F1F;
}
.headline:nth-child(6) {
  --color: #f8c291;
}

.headline--fade .char {
  --name: fade;
  --dur: 2s;
  --del: calc(var(--distance-percent) * 0.15s);
  --td: ease-in-out;
  -webkit-transform-origin: 0 100%;
          transform-origin: 0 100%;
}
@-webkit-keyframes fade {
  50% {
    opacity: 0;
  }
}
@keyframes fade {
  50% {
    opacity: 0;
  }
}
.headline--ghost .char {
  --name: rise;
  --dur: 3s;
  --del: calc(var(--distance-percent) * 0.125s);
  --tf: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -webkit-transform-origin: 50% 100%;
          transform-origin: 50% 100%;
}
.headline--ghost .char:after {
  -webkit-animation: ghost var(--dur) ease-in var(--del) infinite;
          animation: ghost var(--dur) ease-in var(--del) infinite;
  content: attr(data-char);
  opacity: 0;
  -webkit-transform-origin: 100% 50%;
          transform-origin: 100% 50%;
  visibility: visible;
}
@-webkit-keyframes rise {
  40% {
    -webkit-transform: translateY(-40%) rotate(calc(var(--distance-sine) * 10deg));
            transform: translateY(-40%) rotate(calc(var(--distance-sine) * 10deg));
  }
  50% {
    -webkit-transform: translateY(6%);
            transform: translateY(6%);
  }
  55% {
    -webkit-transform: translateY(-4%);
            transform: translateY(-4%);
  }
  60% {
    -webkit-transform: translateY(2%);
            transform: translateY(2%);
  }
  65% {
    -webkit-transform: translateY(-1%);
            transform: translateY(-1%);
  }
  70% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
}
@keyframes rise {
  40% {
    -webkit-transform: translateY(-40%) rotate(calc(var(--distance-sine) * 10deg));
            transform: translateY(-40%) rotate(calc(var(--distance-sine) * 10deg));
  }
  50% {
    -webkit-transform: translateY(6%);
            transform: translateY(6%);
  }
  55% {
    -webkit-transform: translateY(-4%);
            transform: translateY(-4%);
  }
  60% {
    -webkit-transform: translateY(2%);
            transform: translateY(2%);
  }
  65% {
    -webkit-transform: translateY(-1%);
            transform: translateY(-1%);
  }
  70% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
}
@-webkit-keyframes ghost {
  8% {
    opacity: 0;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  40% {
    opacity: 0.25;
    -webkit-transform: translateY(-30%) rotate(calc(var(--distance-sine) * -10deg));
            transform: translateY(-30%) rotate(calc(var(--distance-sine) * -10deg));
  }
  60%, 100% {
    opacity: 0;
    -webkit-transform: translateY(-200%);
            transform: translateY(-200%);
  }
}
@keyframes ghost {
  8% {
    opacity: 0;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  40% {
    opacity: 0.25;
    -webkit-transform: translateY(-30%) rotate(calc(var(--distance-sine) * -10deg));
            transform: translateY(-30%) rotate(calc(var(--distance-sine) * -10deg));
  }
  60%, 100% {
    opacity: 0;
    -webkit-transform: translateY(-200%);
            transform: translateY(-200%);
  }
}
.headline--rock .char {
  --name: rock;
  --dur: 2s;
  --td: ease-in-out;
  -webkit-transform-origin: 0 100%;
          transform-origin: 0 100%;
}
@-webkit-keyframes rock {
  0%, 100% {
    -webkit-transform: rotate(-10deg);
            transform: rotate(-10deg);
  }
  50% {
    -webkit-transform: rotate(-18deg);
            transform: rotate(-18deg);
  }
}
@keyframes rock {
  0%, 100% {
    -webkit-transform: rotate(-10deg);
            transform: rotate(-10deg);
  }
  50% {
    -webkit-transform: rotate(-18deg);
            transform: rotate(-18deg);
  }
}
.headline--sail .word {
  --dur: 5s;
}
.headline--sail .word:before, .headline--sail .word:after {
  -webkit-animation: wave var(--dur) linear infinite;
          animation: wave var(--dur) linear infinite;
  background-image: radial-gradient(circle at 20px -30px, transparent 40px, var(--color) 41px);
  background-repeat: repeat-x;
  background-size: 40px 100%;
  content: '';
  height: 150%;
  left: 0;
  position: absolute;
  top: 90%;
  width: 200%;
  z-index: 2;
}
.headline--sail .word:after {
  -webkit-animation-duration: calc(var(--dur) * 1.4);
          animation-duration: calc(var(--dur) * 1.4);
  opacity: 0.8;
  top: 70%;
}
.headline--sail .char {
  --name: sail;
  --del: calc(var(--char-index) * -0.15s);
  --tf: linear;
}
@-webkit-keyframes sail {
  25% {
    -webkit-transform: rotate(-1deg) translateY(2%);
            transform: rotate(-1deg) translateY(2%);
  }
  50% {
    -webkit-transform: rotate(0) translateY(0);
            transform: rotate(0) translateY(0);
  }
  75% {
    -webkit-transform: rotate(1deg) translateY(1%);
            transform: rotate(1deg) translateY(1%);
  }
}
@keyframes sail {
  25% {
    -webkit-transform: rotate(-1deg) translateY(2%);
            transform: rotate(-1deg) translateY(2%);
  }
  50% {
    -webkit-transform: rotate(0) translateY(0);
            transform: rotate(0) translateY(0);
  }
  75% {
    -webkit-transform: rotate(1deg) translateY(1%);
            transform: rotate(1deg) translateY(1%);
  }
}
@-webkit-keyframes wave {
  to {
    -webkit-transform: translateX(-200px);
            transform: translateX(-200px);
  }
}
@keyframes wave {
  to {
    -webkit-transform: translateX(-200px);
            transform: translateX(-200px);
  }
}
.headline--shiver .word {
  --name: shiver;
  --dur: 3s;
  --td: linear;
}
.headline--shiver .char {
  --name: shiver-letter;
  --del: calc(var(--char-index) * -0.0125s);
  --dur: 140ms;
  --td: linear;
}
@-webkit-keyframes shiver {
  1% {
    -webkit-transform: translateX(2%);
            transform: translateX(2%);
  }
  2% {
    -webkit-transform: translateX(-2%);
            transform: translateX(-2%);
  }
  3% {
    -webkit-transform: translateX(3%);
            transform: translateX(3%);
  }
  4% {
    -webkit-transform: translateX(-3%);
            transform: translateX(-3%);
  }
  5% {
    -webkit-transform: translateX(4%);
            transform: translateX(4%);
  }
  6% {
    -webkit-transform: translateX(-4%);
            transform: translateX(-4%);
  }
  7% {
    -webkit-transform: translateX(3%);
            transform: translateX(3%);
  }
  8% {
    -webkit-transform: translateX(-3%);
            transform: translateX(-3%);
  }
  9% {
    -webkit-transform: translateX(2%);
            transform: translateX(2%);
  }
  10% {
    -webkit-transform: translateX(-2%);
            transform: translateX(-2%);
  }
  11% {
    -webkit-transform: translateX(1%);
            transform: translateX(1%);
  }
  12% {
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
  }
}
@keyframes shiver {
  1% {
    -webkit-transform: translateX(2%);
            transform: translateX(2%);
  }
  2% {
    -webkit-transform: translateX(-2%);
            transform: translateX(-2%);
  }
  3% {
    -webkit-transform: translateX(3%);
            transform: translateX(3%);
  }
  4% {
    -webkit-transform: translateX(-3%);
            transform: translateX(-3%);
  }
  5% {
    -webkit-transform: translateX(4%);
            transform: translateX(4%);
  }
  6% {
    -webkit-transform: translateX(-4%);
            transform: translateX(-4%);
  }
  7% {
    -webkit-transform: translateX(3%);
            transform: translateX(3%);
  }
  8% {
    -webkit-transform: translateX(-3%);
            transform: translateX(-3%);
  }
  9% {
    -webkit-transform: translateX(2%);
            transform: translateX(2%);
  }
  10% {
    -webkit-transform: translateX(-2%);
            transform: translateX(-2%);
  }
  11% {
    -webkit-transform: translateX(1%);
            transform: translateX(1%);
  }
  12% {
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
  }
}
@-webkit-keyframes shiver-letter {
  25% {
    -webkit-transform: translateY(1%);
            transform: translateY(1%);
  }
  50% {
    -webkit-transform: translate(calc(var(--distance-percent) * 1%), calc(var(--distance-percent) * 1%));
            transform: translate(calc(var(--distance-percent) * 1%), calc(var(--distance-percent) * 1%));
  }
  75% {
    -webkit-transform: translateY(1%);
            transform: translateY(1%);
  }
}
@keyframes shiver-letter {
  25% {
    -webkit-transform: translateY(1%);
            transform: translateY(1%);
  }
  50% {
    -webkit-transform: translate(calc(var(--distance-percent) * 1%), calc(var(--distance-percent) * 1%));
            transform: translate(calc(var(--distance-percent) * 1%), calc(var(--distance-percent) * 1%));
  }
  75% {
    -webkit-transform: translateY(1%);
            transform: translateY(1%);
  }
}
.headline--yell .char {
  --name: yell;
  --dur: 3s;
  --tf: ease;
  -webkit-transform-origin: 50% 100%;
          transform-origin: 50% 100%;
}
@-webkit-keyframes yell {
  3% {
    -webkit-transform: scale(calc(1 * var(--distance-percent) + 1.5)) rotate(calc(15deg * var(--distance-sine))) translateY(-10%);
            transform: scale(calc(1 * var(--distance-percent) + 1.5)) rotate(calc(15deg * var(--distance-sine))) translateY(-10%);
  }
  6% {
    -webkit-transform: scale(calc(1 * var(--distance-percent) + 1.2)) rotate(calc(15deg * var(--distance-sine))) translateY(-10%);
            transform: scale(calc(1 * var(--distance-percent) + 1.2)) rotate(calc(15deg * var(--distance-sine))) translateY(-10%);
  }
  12% {
    -webkit-transform: scale(calc(1 * var(--distance-percent) + 1.5)) rotate(calc(15deg * var(--distance-sine))) translateY(-10%);
            transform: scale(calc(1 * var(--distance-percent) + 1.5)) rotate(calc(15deg * var(--distance-sine))) translateY(-10%);
  }
  18% {
    -webkit-transform: scaleY(1) translateY(-2%);
            transform: scaleY(1) translateY(-2%);
  }
  25% {
    -webkit-transform: scaleY(0.98);
            transform: scaleY(0.98);
  }
  50% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
  }
  75% {
    -webkit-transform: scale(0.98);
            transform: scale(0.98);
  }
}
@keyframes yell {
  3% {
    -webkit-transform: scale(calc(1 * var(--distance-percent) + 1.5)) rotate(calc(15deg * var(--distance-sine))) translateY(-10%);
            transform: scale(calc(1 * var(--distance-percent) + 1.5)) rotate(calc(15deg * var(--distance-sine))) translateY(-10%);
  }
  6% {
    -webkit-transform: scale(calc(1 * var(--distance-percent) + 1.2)) rotate(calc(15deg * var(--distance-sine))) translateY(-10%);
            transform: scale(calc(1 * var(--distance-percent) + 1.2)) rotate(calc(15deg * var(--distance-sine))) translateY(-10%);
  }
  12% {
    -webkit-transform: scale(calc(1 * var(--distance-percent) + 1.5)) rotate(calc(15deg * var(--distance-sine))) translateY(-10%);
            transform: scale(calc(1 * var(--distance-percent) + 1.5)) rotate(calc(15deg * var(--distance-sine))) translateY(-10%);
  }
  18% {
    -webkit-transform: scaleY(1) translateY(-2%);
            transform: scaleY(1) translateY(-2%);
  }
  25% {
    -webkit-transform: scaleY(0.98);
            transform: scaleY(0.98);
  }
  50% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
  }
  75% {
    -webkit-transform: scale(0.98);
            transform: scale(0.98);
  }
}
</style>
<main class="container">
<h2 data-splitting class="headline headline--yell">yelling</h2>
<h2 data-splitting class="headline headline--ghost">ghosting</h2>
<h2 data-splitting class="headline headline--sail">sailing</h2>
<h2 data-splitting class="headline headline--shiver">shivering</h2>
<h2 data-splitting class="headline headline--fade">fading</h2>
<h2 data-splitting class="headline headline--rock">rocking</h2>
</main>
<script src='https://www.htmlbestcodes.com/uploads/other/splitting.min.js'></script>
<script id="rendered-js">
Splitting();
</script><a target='_blank' href='https://www.htmlbestcodes.com' style='font-size: 8pt; text-decoration: none'>Html Best Codes</a>

Example:

About @kerixa

I am Krishna Eydat. I studied Software Engineering at University of Waterloo in Canada. I lead a few tech companies. I am passionate about the way we are connected. I would like to be part of something big or be the big deal!

K

Comments

Here you can leave us commments. Let us know what you think about this code tutorial!

0 / 300
TRENDING POST
1
Neomorphism Button with Hover Effect
2
Vanishing Spinning Ball Loader
3
Yet Another Circle Spinning Loader
4
Oval Ticker Spinner Loader
5
Eclipse Spinner Loader
VISITORS
Online Users: 12
Recent Members: sahjahan, fk khan, Proper, Jenisha, Mr Joseph Charles
advertisement 2