Playing Changes // Animated Book Cover

/*Downloaded from https://www.codeseek.co/cobra_winfrey/playing-changes-animated-book-cover-xzdWdb */
    $p: #ffddd5;
$br: #1e0a02;
$b: #21201e;
$g: #00a854;
$y: #f2cd2e;
$r: #d2162c;
$bl: #4683b6;
$w: #fff;

body {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  background: radial-gradient(circle at center, $b, darken($b, 10%));
  font-family: Perpetua, Baskerville, "Big Caslon", "Palatino Linotype",
    Palatino, "URW Palladio L", "Nimbus Roman No9 L", serif;
  overflow:hidden;
  .wrap {
    width: 350px;
    min-width:350px;
    height: 500px;
    background: $p;
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: 20% 20% 20% 20% 20%;
    .heading {
      grid-column: 1 / span 2;
      grid-row: 1;
      background: linear-gradient(
        to right,
        $w 49.75%,
        $y 49.5%,
        $y 50.25%,
        $w 50.25%
      );
      box-shadow: 0 10px 0 $w, inset 0 15px 0 $w, inset 0 -10px 0 $w;
      display: grid;
      grid-template-columns: 50% 50%;
      padding: 30px 20px;
      h1 {
        grid-column: 1;
        text-transform: uppercase;
        font-weight: 500;
        font-size: 24px;
        letter-spacing: 2px;
        line-height: 1;
        margin: 0;
        position: relative;
        font-variant: small-caps;
        padding: 0 0 0 10px;
      }
      h3 {
        grid-column: 2;
        font-weight: 600;
        font-size: 22px;
        line-height: 1.25;
        position: relative;
        display: block;
        padding: 0 0 0 15px;
        margin-top: 5px;
        span {
          font-size: 14px;
          display: block;
          font-style: italic;
          font-weight: 100;
        }
      }
    }
    .quadrant {
      position: relative;
      box-sizing: border-box;
      &:first-of-type {
        grid-column: 1;
        grid-row: 2 / span 2;
        display: grid;
        grid-template-columns: 15px 15px 15px 15px 15px;
        grid-column-gap: 15px;
        padding: 75px 30px 0;
        .block {
          background: $b;
          animation: raiseup 5s cubic-bezier(0.175, 0.885, 0.32, 1.275) infinite
            alternate;
          @for $i from 1 through 5 {
            &:nth-of-type(#{$i}) {
              animation-delay: #{$i * -2}s;
            }
          }
          @keyframes raiseup {
            80% {
              background: $b;
              transform: translateY(0);
            }
            85% {
              background: $bl;
              transform: translateY(-15px);
            }
            100% {
              background: $bl;
              transform: translateY(-15px);
            }
          }
          &:nth-of-type(n + 6) {
            display: none;
          }
        }
      }
      &:nth-of-type(2) {
        grid-column: 1;
        grid-row: 4 / span 2;
        display: grid;
        grid-template-columns: 30px 30px 30px;
        grid-column-gap: 22.5px;
        grid-template-rows: 30px 30px 30px;
        grid-row-gap: 17.5px;
        padding: 20px 30px;
        .block {
          background: $b;
          animation: rotate 9s cubic-bezier(0.175, 0.885, 0.32, 1.275) infinite
            alternate;
          @for $i from 1 through 9 {
            &:nth-of-type(#{$i}) {
              animation-delay: #{$i * -2}s;
            }
          }
          @keyframes rotate {
            90% {
              background: $b;
              transform: rotate(0deg);
            }
            95% {
              background: $y;
              transform: rotate(135deg);
            }
            100% {
              background: $y;
              transform: rotate(135deg);
            }
          }
          &:nth-of-type(10) {
            display: none;
          }
        }
      }
      &:nth-of-type(3) {
        grid-column: 2;
        grid-row: 2 / span 2;
        display: grid;
        grid-template-columns: 30px 30px 30px;
        grid-column-gap: 22.5px;
        grid-template-rows: 30px 30px 30px;
        grid-row-gap: 17.5px;
        padding: 20px 15px;
        .block {
          background: $b;
          border-radius: 100%;
          animation: greenup 3.25s cubic-bezier(0.175, 0.885, 0.32, 1.275)
            infinite alternate;
          @for $i from 1 through 9 {
            &:nth-of-type(#{$i}) {
              animation-delay: #{$i * -0.75}s;
            }
          }
          @keyframes greenup {
            90% {
              background: $b;
              transform: rotate(0deg);
            }
            95% {
              background: $g;
              transform: translateY(-12.5px);
            }
            100% {
              background: $g;
              transform: translateY(-12.5px);
            }
          }
          &:last-of-type {
            display: none;
          }
        }
      }
      &:nth-of-type(4) {
        grid-column: 2;
        grid-row: 3 / span 3;
        display: grid;
        grid-template-columns: 95%;
        grid-template-rows: 7px 7px 7px 7px 7px 7px 7px 7px 7px 7px;
        grid-row-gap: 13px;
        padding: 60px 15px 0 15px;
        .block {
          background: $b;
          animation: redtilt 4s cubic-bezier(0.175, 0.885, 0.32, 1.275) infinite
            alternate;
          &:nth-of-type(even) {
            animation: redtilt2 4s cubic-bezier(0.175, 0.885, 0.32, 1.275)
              infinite alternate;
          }
          @for $i from 1 through 10 {
            &:nth-of-type(#{$i}) {
              animation-delay: #{$i * -0.75}s;
            }
          }
          @keyframes redtilt {
            95% {
              background: $b;
              transform: rotate(0deg);
            }
            97.5% {
              background: $r;
              transform: rotate(-7.5deg);
            }
            100% {
              background: $r;
              transform: rotate(-7.5deg);
            }
          }
          @keyframes redtilt2 {
            85% {
              background: $b;
              transform: rotate(0deg);
            }
            92.5% {
              background: $r;
              transform: rotate(7.5deg);
            }
            100% {
              background: $r;
              transform: rotate(7.5deg);
            }
          }
        }
      }
    }
  }
}

/*Downloaded from https://www.codeseek.co/cobra_winfrey/playing-changes-animated-book-cover-xzdWdb */