Megaman READY!

index.pug

.ready
   - var t = -1
   - var n = -1
   .letter.R
      while n++ < 10
        .block(style={ "--index": ++t, "--angle": (147 * t) % 360, "--sign": t % 2 ? 1 : -1, "grid-area": "a" + (n+1) })
          .face.face-1
          .face.face-2
          .face.face-3

   - n = -1;
   .letter.E
      while n++ < 10
        .block(style={ "--index": ++t, "--angle": (-147 * t) % 360, "--sign": t % 2 ? 1 : -1, "grid-area": "a" + (n+1) })
          .face.face-1
          .face.face-2
          .face.face-3

   - n = -1;
   .letter.A
      while n++ < 9
        .block(style={ "--index": ++t, "--angle": (147 * t) % 360, "--sign": t % 2 ? 1 : -1, "grid-area": "a" + (n+1) })
          .face.face-1
          .face.face-2
          .face.face-3
          
   - n = -1;
   .letter.D
      while n++ < 10
        .block(style={ "--index": ++t, "--angle": (-147 * t) % 360, "--sign": t % 2 ? 1 : -1, "grid-area": "a" + (n+1) })
          .face.face-1
          .face.face-2
          .face.face-3
          
   - n = -1;
   .letter.Y
      while n++ < 7
        .block(style={ "--index": ++t, "--angle": (147 * t) % 360, "--sign": t % 2 ? 1 : -1, "grid-area": "a" + (n+1) })
          .face.face-1
          .face.face-2
          .face.face-3

megaman-ready.markdown

Megaman READY!

Reproducing the famous "READY" from the Megaman games without using JavaScript. This uses CSS Grid extensively and css variables for timing.

A Pen by Christopher Wallis on CodePen.

License.

style.scss

$delay: 1250ms;
$duration: 6000ms;
$size: 25px;
$half: $size / 2;
$nalf: $size / -2;

$total-blocks: 50;

html, body {
   height: 100%; 
   margin: 0;
   overflow: hidden;
}

* {
   box-sizing: border-box;
}

body {
   display: flex;
   height: 100%;
   width: 100%;
   justify-content: center;
   align-items: center; 
   background-image: linear-gradient(to top, #c6c6c6, #ffffff 10vh, #e7e7e7 10vh, #EEE);
}

.ready {
   display: grid;
   grid-gap: $size;
   grid-template-columns: repeat(5, 1fr);
   
   animation: lateral $duration linear infinite both;
   animation-delay: $delay / 2;
}

.R { 
   grid-template-areas:
      "a1 a6 a8"
      "a2 . a9"
      "a3 a7 ."
      "a4 . a10"
      "a5 . a11";

   > :nth-child(8),
   > :nth-child(9) {
      top: $half;
      position: relative;
   }
   > :nth-child(10) {
      left: $nalf;
      position: relative;
   }
}

.E { 
   grid-template-areas:
      "a1 a6 a9"
      "a2 . ."
      "a3 a7 a10"
      "a4 . ."
      "a5 a8 a11";
}

.A { 
   grid-template-areas:
      ". a1 ."
      "a2 . a7"
      "a3 . a8"
      "a4 a6 a9"
      "a5 . a10";

   > :nth-child(2) {
      left: $half;
      position: relative;
   }
   > :nth-child(7) {
      left: $nalf;
      position: relative;
   }
}

.D { 
   grid-template-areas:
      "a1 a6 a8"
      "a2 . a9"
      "a3 . a10"
      "a4 . a11"
      "a5 a7 .";
   > :nth-child(n + 8) {
      top: $half;
      position: relative;
   }
}

.Y {
   grid-template-areas:
      "a1 . a6"
      "a2 . a7"
      "a3 . a8"
      ". a4 ."
      ". a5 .";

   > :nth-child(3) {
      left: $half;
      position: relative;
   }
   > :nth-child(8) {
      left: $nalf;
      position: relative;
   }
}

.letter {
   display: grid;
   grid-gap: 4px;
}

.block {
   --ratio: calc(var(--index) / #{$total-blocks});
   --delay: calc(calc(var(--ratio) * #{$delay / 2}) + #{$delay / 2}); 
     
   transform-style: preserve-3d; 
   transform: rotate(calc(var(--angle) * 1deg)) translate3d(calc(var(--sign) * 200vw), 0, 0) rotate3d(1, 0, 0, -90deg) rotate3d(0, 1, 0, 90deg);
   animation-name: block-intro;
   animation-timing-function: ease-in;  
   animation-fill-mode: both;
   animation-iteration-count: infinite;
   animation-delay: var(--delay);
   animation-direction: reverse;
   animation-duration: $duration;
   position: relative;
   z-index: -1;
   
   height: $size;
   width: $size;
   will-change: transform;

   .face {
      display: block;
      position: absolute;
      background-color: #2e92de;
      backface-visibility: visible;
      width: $size;
      height: $size;
      border: solid 1px #2f454f;
      display: flex;
      justify-content: center;
      align-items: center;
   }

   .face-1 {
      transform-origin: bottom center;
   }

   .face-2 {
      transform: rotateX(-90deg);
      transform-origin: bottom center;
      overflow: hidden;
      
      &:before {
         content: '';
         position: absolute;
         background-color: #00d2ff99;
         top: 0;
         left: 0;
         right: 0;
         bottom: 0;
         animation: shimmer $duration linear;
         animation-delay: var(--delay);
         animation-fill-mode: both;
         animation-iteration-count: infinite;
      }
      // display: none;
   }
   .face-3 {
      transform: rotateY(90deg);
      transform-origin: right center;
      // display: none;
   }
}
 
@keyframes block-intro { 
   40%  {
      transform: rotate(0deg) translate3d(0, 0, 0) rotate3d(1, 0, 0, -90deg) rotate3d(0, 1, 0, 90deg);
      animation-timing-function: cubic-bezier(.95,.05,.8,.04);
   }
   70% { 
      transform: rotate(0deg) translate3d(0, 0, 0) rotate3d(1, 0, 0, -90deg) rotate3d(0, 1, 0, 90deg);
      animation-timing-function: linear;
   }
   80% { 
      transform: rotate(0deg) translate3d(0, 0, 0) rotate3d(1, 0, 0, 0deg) rotate3d(0, 1, 0, 0deg);
      animation-timing-function: linear;
   }
   100% {  
      transform: rotate(0deg) translate3d(150vw, 0, 0) rotate3d(1, 0, 0, 0deg) rotate3d(0, 1, 0, 0deg);
      animation-timing-function: ease-out;
   }
}

@keyframes lateral {
   from {
      transform: translateX(12%)
   }
   to {
      transform: translateX(-12%)
   }
}

@keyframes shimmer {
   from, 25% {
      transform: scale(2, 1) rotate(-45deg) translate(-100%);
   }
   35%, to {
      transform: scale(2, 1) rotate(-45deg) translate(0%);
   }
}

it not properly working in chrome browser, however it working perfectly in Firefox, but in chrome it not working properly even pen is not properly loading, and eating too much CPU resources. Please fix it for chrome browser.