Lightning Round ⚡ Text Animations

index.html

<a href="https://twitch.tv/keyframers" target="_blank" data-keyframers-credit style="color: #FFF">Watch the @keyframers live, Monday @ 21:00 EST</a>
<script src="https://codepen.io/shshaw/pen/QmZYMG.js"></script>


<div class="lightning-round">
  <span class="text" data-splitting> LIGHTNING ROUND </span>
  <span class="zap" data-splitting>⚡</span>
</div>


<div class="rerun">Click to replay</div>

lightning-round-text-animations.markdown

Lightning Round ⚡ Text Animations

Promo animation for the upcoming Text Animation Lightning Round for @keyframers.

Next week… LIGHTNING ROUND ⚡TEXT ANIMATIONS! Rapid-fire building of multiple text/word #CSS #animations via #SplittingJS!

📼 Last Lightning Round: Loaders https://youtu.be/XqWsvQxKNac ⏰ Monday, August 27 @ 21:00 EST/01:00 GMT 📺 Live Stream: https://twitch.tv/keyframers

Built with Splitting.js

A Pen by @keyframers on CodePen.

License.

script.js

Splitting();

var lr = document.querySelector('.lightning-round');
document.body.addEventListener('click',()=>{
  var newone = lr.cloneNode(true);
  lr.parentNode.replaceChild(newone, lr);
  lr = newone;
});

// setTimeout(()=>{ document.body.click(); },4000);

scripts

<script src="https://unpkg.com/splitting/dist/splitting.min.js"></script>

style.scss

$delay: 6s;

html, body { background: #000; } //#2B2E31; color: #FFF; }
html { height: 100%; display: flex; overflow: hidden; }
body { margin: auto; }

/* ---------------------------------- */

@import url('https://fonts.googleapis.com/css?family=Orbitron:700');
.lightning-round {
  font-family: 'Orbitron', monospace;
  font-weight: 700;
  font-size: 8vw;
  // @media (min-width: 600px) { font-size: 120px; }
  perspective: 200px;
  perspective-origin: top center;
  color: #FFD950;


  .word {
    transform: rotateX(15deg);
    display: inline-block;
    transform-style: preserve-3d;
    animation: glitch-bounce .5s steps(1) infinite;
    @keyframes glitch-bounce {
      20% {
        transform: rotateX(15deg) translate3d(-1%, 0%, 0px);
      }
      40% {
        transform: rotateX(15deg) translate3d(-3%, 1%, -.1em);
      }
      60% {
        transform: rotateX(15deg) translate3d(1%, -1%, 0px);
      }
      80% {
        transform: rotateX(15deg) translate3d(-2%, 1%, .1em);
      }
    }
  }

  .char {
    display: inline-block;
    transform-style: preserve-3d;
    position: relative;
    color: #444;

    &:before,
    &:after {
      visibility: visible;
      content: attr(data-char);
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0.4;
      transform-style: preserve-3d;
      transform: translate3d(0, 3px, -.25em);
    }

    &:after {
      transform: translate3d(0, -3px, .25em);

      color: #FFD950;
      opacity: 1;
    }

  }

  .text .char {
    transform-origin: center bottom;
    animation: 
      char-in 1s cubic-bezier(.5, 0, .5, 1) backwards, 
      char-out .7s cubic-bezier(.8, 0, .5, 1) forwards;
    animation-delay: 
      calc(0s + (.2s * (var(--distance-percent)) )),
      calc(#{$delay} + (.15s * (  var(--distance-percent)) ));
  }

}
@keyframes char-in {
  0% { 
    opacity: 0;
    transform: 
      translateY(-4em)
      translateX(
        calc(2em * var(--distance-percent))
      )
      translateZ(
        calc(3em + (8em * var(--distance-percent)))
      );
  }

  //80%, 100% { opacity: 1; transform: translate3d(0,0,0); }
}

@keyframes char-out {
  100% { 
    opacity: 0;
    transform: 
      translateY(4em)
      translateZ(
        calc(3em + (8em * var(--distance-percent)))
      );
  }
}

.zap {
  font-size: 4em;
  display: block;
  z-index: -1;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 1em;
  height: 1em;
  margin: auto;
  transform: translateZ(0);
  animation: zap-in .75s cubic-bezier(.5,0,.2,1) .3s backwards,
    zap-out 1.75s cubic-bezier(.8, 0, .5, 1) #{$delay} forwards;//cubic-bezier(.5, 0, .5, 1);

  .char.char:after {
    opacity: .2;
    transform: translate3d(0, 3px, -.5em);
  }
}

@keyframes zap-in {
  from {
    opacity: 0;
    transform: translateY(-100vh) translateZ(-2em);
  }
}

@keyframes zap-out {
  to {
    opacity: 0;
    transform: translateY(-2em) translateZ(10em);
  }
}


.rerun {
  font-family: 'Orbitron', monospace;
  font-weight: 700;
  color: #FFF;
  font-size: 12px;
  text-align: center;
  margin-top: 3.5em;
  animation: fade-in-out 5s linear #{$delay} both;
  
  @keyframes fade-in-out { 0%, 100% { opacity: 0; } 30%, 70% { opacity: 1; } }
}

styles

<link href="https://unpkg.com/splitting/dist/splitting.css" rel="stylesheet" />
<link href="https://unpkg.com/splitting/dist/splitting-cells.css" rel="stylesheet" />