CodePen Embed - SnorklTV Challenge 3B 😅

h1 Challenge 3b
.wrapper
  .graph
    .box.blue
    .box.red
    .green

View Compiled

body {
  font-family:sans-serif;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.wrapper {

  display:flex;
  flex-wrap:wrap;
}
.instructions{
  padding:20px;
  width:800px;
}

li{
  margin:10px;
}


.graph{
  position:relative;
  width:400px;
  height:350px;
  background-color:#ccc;
background-image: linear-gradient(white 2px, transparent 2px),
linear-gradient(90deg, white 2px, transparent 2px),
linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.3) 1px, transparent 1px);
background-size: 50px 50px, 50px 50px;
background-position:-2px -2px, -2px -2px;
}

.box {
  width:48px;
  height:48px;
  position:absolute;
}

.red {
  background:red;
  transform:translate(150px, 150px);
}

.blue {
  background:blue;
  transform:translate(200px, 150px);
}

.green {
  width:398px;
  height:10px;
  position:absolute;
  background:green;
  bottom:-10px;
}

/*  CHALLENGE ONE CODE */


.red,
.blue {
  animation-name: horizontal, vertical;
  animation-duration: 1s, 2s;
/* 	animation-delay: 0s, 2s; */
  animation-delay: 2s, 4s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}

.red {
  --x: 150;
  --y: 150;
  --x-0: 0;
  --y-0: 150;
  --x-1: 150;
  --y-1: 0;
}

.blue {
  --x: 200;
  --y: 150;
  --x-0: 350;
  --y-0: 150;
  --x-1: 200;
  --y-1: 300;
}

@keyframes horizontal {
  from {
      transform: translate(calc(var(--x-0) * 1px), calc(var(--y-0) * 1px));
  }
  to {
    transform: translate(calc(var(--x) * 1px), calc(var(--y) * 1px));
  }
}

@keyframes vertical {
  from {
      transform: translate(calc(var(--x) * 1px), calc(var(--y) * 1px));
  }
  to {
    transform: translate(calc(var(--x-1) * 1px), calc(var(--y-1) * 1px));
  }
}

/* Challenge 2 code */
/* Let's start scoping things! */
.wrapper {
  --fade-speed: 2;
  --timing-function: ease-out;
  /* element characteristics */
  --horizontal-speed: 1;
  --horizontal-wait: 0;
  --vertical-speed: 2;
  --vertical-wait: 1;
}

.graph {
  animation-name: fade;
  animation-duration: calc(var(--fade-speed) * 1s);
  animation-delay: calc(var(--fade-delay) * 1s);
}

.red,
.blue {
  animation-duration: calc(var(--horizontal-speed) * 1s), calc(var(--vertical-speed) * 1s);
  animation-delay: calc((var(--fade-speed) + var(--horizontal-wait)) * 1s), calc((var(--fade-speed) + var(--horizontal-speed) + var(--vertical-wait)) * 1s);
  animation-timing-function: var(--timing-function);
  animation-fill-mode: both, forwards;
}

.green {
  animation-name: scale;
  animation-duration: calc((var(--fade-speed) + var(--horizontal-wait) + var(--horizontal-speed) + var(--vertical-wait) + var(--vertical-speed)) * 1s);
  animation-fill-mode: forwards;
  animation-timing-function: var(--timing-function);
  transform-origin: left;
}

@keyframes fade {
  from {
    opacity: 0;
  }
}

@keyframes scale {
  from {
    transform: scaleX(0);
  }
}

/* Challenge 3 code */

.red,
.blue {
  --travel: calc(var(--x) - var(--x-0));
  background: transparent;
  position: absolute;
  z-index: 2;
}

.red:after,
.blue:after {
  animation-name: spin;
  animation-duration: 1s;
  animation-delay: calc((var(--fade-speed) + var(--horizontal-speed) + var(--vertical-wait) + 1) * 1s)
  content: '';
  position: absolute;
  height: 100%;
  width: 100%;
}

.red:after {
  background: red;
}
.blue:after {
  background: blue;
}

@keyframes horizontal {
  0% {
    transform: translate(calc(var(--x-0) * 1px), calc(var(--y) * 1px));
  }

  12% {
    transform: translate(calc((var(--x-0) + (var(--travel) * 0.1089)) * 1px), calc(var(--y) * 1px));
  }

  24% {
    transform: translate(calc((var(--x-0) + (var(--travel) * 0.4356)) * 1px), calc(var(--y) * 1px));
  }

  36% {
    transform: translate(calc((var(--x-0) + (var(--travel) * 0.9801)) * 1px), calc(var(--y) * 1px));
  }

  54% {
    transform: translate(calc((var(--x-0) + (var(--travel) * 0.7502)) * 1px), calc(var(--y) * 1px));
  }

  74% {
    transform: translate(calc((var(--x-0) + (var(--travel) * 0.9837)) * 1px), calc(var(--y) * 1px));
  }

  82% {
    transform: translate(calc((var(--x-0) + (var(--travel) * 0.9375)) * 1px), calc(var(--y) * 1px));
  }

  92% {
    transform: translate(calc((var(--x-0) + (var(--travel) * 0.9934)) * 1px), calc(var(--y) * 1px));
  }

  96% {
    transform: translate(calc((var(--x-0) + (var(--travel) * 0.9846)) * 1px), calc(var(--y) * 1px));
  }

  100% {
    transform: translate(calc((var(--x-0) + (var(--travel) * 1)) * 1px), calc(var(--y) * 1px));
  }

}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  95% {
    transform: rotate(405deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

// Challenge 3b

.red,
.blue {
  animation-duration: calc(var(--horizontal-speed) * 1s), 0.5s, 0.5s;
  animation-delay: calc((var(--fade-speed) + var(--horizontal-wait)) * 1s), calc((var(--fade-speed) + var(--horizontal-speed) + var(--vertical-wait) + 1) * 1s), calc((var(--fade-speed) + var(--horizontal-speed) + var(--vertical-wait) + 1.5) * 1s);
  animation-timing-function: var(--timing-function);
  animation-fill-mode: both, forwards;
}

.red {
  animation-name: horizontal--red, gobble, shake, shake--2;
  animation-duration: 1s, 0.5s, 0.5s, 0.15s;
  animation-iteration-count: 1, 1, 1, 4;
  animation-fill-mode: both, forwards, forwards, forwards;
  animation-delay: calc((var(--fade-speed) + var(--horizontal-wait)) * 1s), calc((var(--fade-speed) + var(--horizontal-speed) + var(--vertical-wait) + 1) * 1s), calc((var(--fade-speed) + var(--horizontal-speed) + var(--vertical-wait) + 1.5) * 1s), calc((var(--fade-speed) + var(--horizontal-speed) + var(--vertical-wait) + 2.5) * 1s);
}
.blue {
  animation-name: horizontal--blue, eject;
  animation-duration: 1s, 0.5s;
  animation-delay: calc((var(--fade-speed) + var(--horizontal-wait)) * 1s), calc((var(--fade-speed) + var(--horizontal-speed) + var(--vertical-wait) + 3) * 1s);
}
.red:after {
  --open: -45;
  animation-name: hulk-up, open--top, open--top;
  animation-fill-mode: forwards;
  animation-duration: 0.5s, 1s, 0.5s;
  animation-delay: calc((var(--fade-speed) + var(--horizontal-speed) + var(--vertical-wait)) * 1s), calc((var(--fade-speed) + var(--horizontal-speed) + var(--vertical-wait) + 1) * 1s), calc((var(--fade-speed) + var(--horizontal-speed) + var(--vertical-wait) + 3) * 1s);
  transform-origin: left bottom;
  height: 50%;
}
.red:before {
  --open: 45;
  content: '';
  transform-origin: left top;
  height: 50%;
  animation-name: hulk-up, open--bottom, open--bottom;
  animation-fill-mode: forwards;
  animation-duration: 0.5s, 1s, 0.5s;
  animation-delay: calc((var(--fade-speed) + var(--horizontal-speed) + var(--vertical-wait)) * 1s), calc((var(--fade-speed) + var(--horizontal-speed) + var(--vertical-wait) + 1) * 1s), calc((var(--fade-speed) + var(--horizontal-speed) + var(--vertical-wait) + 3) * 1s);
  bottom: 0;
  background: red;
  width: 100%;
  position: absolute;
}

.graph {
  -webkit-clip-path: inset(0 0 -10% 0);
  clip-path: inset(0 0 -10% 0);
}

.blue:after {
  animation-name: hurled;
  animation-speed: 1s;
  animation-delay: calc((var(--fade-speed) + var(--horizontal-speed) + var(--vertical-wait) + 3) * 1s);
}

@keyframes hurled {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(1080deg);
  }
}

@keyframes eject {
  from {
    transform: translate(calc((var(--x-0) + (var(--travel) * 1.25)) * 1px), calc(var(--y) * 1px));
  }
  to {
    transform: translate(500px, calc(var(--y) * 1px));
  }
}

@keyframes shake {
  0%, 100% {
    transform: translate(150px, calc(var(--y) * 1px)) rotate(0deg);
  }
  50% {
    transform: translate(150px, calc(var(--y) * 1px)) rotate(12deg);
  }
}

@keyframes shake--2 {
  0%, 100% {
    transform: translate(150px, calc(var(--y) * 1px)) rotate(0deg);
  }
  25% {
    transform: translate(150px, calc(var(--y) * 1px)) rotate(-12deg);
  }
  50% {
    transform: translate(150px, calc(var(--y) * 1px)) rotate(5deg);
  }
  75% {
    transform: translate(150px, calc(var(--y) * 1px)) rotate(12deg);
  }
}

@keyframes hulk-up {
  0% {
    transform-origin: left;
    transform: scale(1)
  }
  100% {
    background-color: hsl(90%, 100%, 50%);
    transform: scale(2);
  }
}

@keyframes open--bottom {
  0%, 100% {
    transform: scale(2) rotate(0deg);
  }
  50% {
    transform: scale(2) rotate(45deg);
  }
}
@keyframes open--top {
  0%, 100% {
    transform: scale(2) rotate(0deg);
  }
  50% {
    transform: scale(2) rotate(-45deg);
  }
}

@keyframes gobble {
  from {
    transform: translate(0, calc(var(--y) * 1px))
  }
  to {
    transform: translate(150px, calc(var(--y) * 1px));
  }
}

@keyframes horizontal--blue {
  0% {
    transform: translate(calc(var(--x-0) * 1px), calc(var(--y) * 1px));
  }

  12% {
    transform: translate(calc((var(--x-0) + (var(--travel) * 0.1089)) * 1px), calc(var(--y) * 1px));
  }

  24% {
    transform: translate(calc((var(--x-0) + (var(--travel) * 0.4356)) * 1px), calc(var(--y) * 1px));
  }

  36% {
    transform: translate(calc((var(--x-0) + (var(--travel) * 0.9801)) * 1px), calc(var(--y) * 1px));
  }

  54% {
    transform: translate(calc((var(--x-0) + (var(--travel) * 0.8502)) * 1px), calc(var(--y) * 1px));
  }

  // 74% {
  // 	transform: translate(calc((var(--x-0) + (var(--travel) * 0.9837)) * 1px), calc(var(--y) * 1px));
  // }

  // 82% {
  // 	transform: translate(calc((var(--x-0) + (var(--travel) * 0.9675)) * 1px), calc(var(--y) * 1px));
  // }

  100% {
    transform: translate(calc((var(--x-0) + (var(--travel) * 1.25)) * 1px), calc(var(--y) * 1px));
  }

}

@keyframes horizontal--red {
  0% {
    transform: translate(calc(var(--x-0) * 1px), calc(var(--y) * 1px)) rotate(0deg);
  }

  12% {
    transform: translate(calc((var(--x-0) + (var(--travel) * 0.1089)) * 1px), calc(var(--y) * 1px)) rotate(0deg);
  }

  24% {
    transform: translate(calc((var(--x-0) + (var(--travel) * 0.4356)) * 1px), calc(var(--y) * 1px)) rotate(0deg);
  }

  36% {
    transform: translate(calc((var(--x-0) + (var(--travel) * 0.9801)) * 1px), calc(var(--y) * 1px)) rotate(0deg);
  }

  65% {
    transform: translate(calc((var(--x-0) + (var(--travel) * 0.0502)) * 1px), calc(var(--y) * 1px)) rotate(0deg);
  }

  85% {
    transform: translate(calc((var(--x-0) + (var(--travel) * 0.0837)) * 1px), calc(var(--y) * 1px)) rotate(0deg);
  }

  // 82% {
  // 	transform: translate(calc((var(--x-0) + (var(--travel) * 0.0375)) * 1px), calc(var(--y) * 1px));
  // }

  // 92% {
  // 	transform: translate(calc((var(--x-0) + (var(--travel) * 0.0934)) * 1px), calc(var(--y) * 1px));
  // }

  // 96% {
  // 	transform: translate(calc((var(--x-0) + (var(--travel) * 0.0846)) * 1px), calc(var(--y) * 1px));
  // }

  100% {
    transform: translate(calc((var(--x-0) + (var(--travel) * 0)) * 1px), calc(var(--y) * 1px)) rotate(0deg);
  }

}

View Compiled

window.addEventListener('click', () => {
  document.body.hidden = true
  setTimeout(() => (document.body.hidden = false), 100)
})

View Compiled

This Pen is owned by Jhey on CodePen.

See more by @jh3y on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.