scratch.css

:root {
  --gradient: linear-gradient(tomato 50%, red);
  --handle-position: translate(-10px, 100px) scaleX(-1);
  --slide-distance: 35px
}

@keyframes caulk {
  0% {
    transform: translateX(0px)
  }
  40% {
    transform: translateX(350px)
  }
  50% {
    transform: translateX(600px) rotate(360deg) scaleY(5) scaleX(.2);
  }
  100% {
    transform: translate(2000px, 400px) rotate(780deg) scaleX(-1);
  }
}

@keyframes handle {
  0% {
    transform-origin: top;
    transform: var(--handle-position) rotate(35deg);
  }
  50% {
    transform-origin: top;
    transform: var(--handle-position) rotate(20deg);
  }
  75% {
    transform-origin: top;
    transform: var(--handle-position) rotate(35deg);
  }
}

@keyframes stick {
  10% {
    transform: translateX(calc(var(--slide-distance) * 1));
  }
  20% {
    transform: translateX(calc(var(--slide-distance) * 1));
  }
  30% {
    transform: translateX(calc(var(--slide-distance) * 2));
  }
  40% {
    transform: translateX(calc(var(--slide-distance) * 2));
  }
  50% {
    transform: translateX(calc(var(--slide-distance) * 3));
  }
  60% {
    transform: translateX(calc(var(--slide-distance) * 3));
  }
  70% {
    transform: translateX(calc(var(--slide-distance) * 4));
  }
  80% {
    transform: translateX(calc(var(--slide-distance) * 4));
  }
  90% {
    transform: translateX(calc(var(--slide-distance) * 5));
  }
  100% {
    transform: translateX(calc(var(--slide-distance) * 0));
  }
}

@keyframes stick-end {
  10% {
    transform: translateX(calc(var(--slide-distance) * 1)) rotate(-20deg);
  }
  20% {
    transform: translateX(calc(var(--slide-distance) * 1)) rotate(-20deg);
  }
  30% {
    transform: translateX(calc(var(--slide-distance) * 2)) rotate(-20deg);
  }
  40% {
    transform: translateX(calc(var(--slide-distance) * 2)) rotate(-20deg);
  }
  50% {
    transform: translateX(calc(var(--slide-distance) * 3)) rotate(-20deg);
  }
  60% {
    transform: translateX(calc(var(--slide-distance) * 3)) rotate(-20deg);
  }
  70% {
    transform: translateX(calc(var(--slide-distance) * 4)) rotate(-20deg);
  }
  80% {
    transform: translateX(calc(var(--slide-distance) * 4)) rotate(-20deg);
  }
  90% {
    transform: translateX(calc(var(--slide-distance) * 5)) rotate(-20deg);
  }
  100% {
    transform: translateX(calc(var(--slide-distance) * 0)) rotate(-20deg);
  }
}

body {
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box;
}

body>div {
  display: grid;
  justify-items: center;
  align-items: center;
  height: 100vh;
  overflow: hidden;
  /* background: linear-gradient(#fff8ef, #fff) */
}

.content {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  transform: scale(.6);
}

.content::before {
  /* stick */
  position: absolute;
  right: calc(100% - 100px);
  top: -15px;
  width: 300px;
  height: 60px;
  border-left: 6px solid grey;
  border-bottom: 6px solid grey;
  box-shadow: -6px 6px 0 0 silver, -6px 0px 0 0 silver;
  border-radius: 0 0 0 5px;
  content: '';
  animation-duration: 20s;
  animation-name: stick;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.content::after {
  /* stick */
  position: absolute;
  right: calc(100% + 172px);
  top: -17px;
  width: 40px;
  height: 6px;
  background-color: silver;
  border-radius: 2px 0 0 0;
  border-bottom-left-radius: 6px 100%;
  box-shadow: 0px 6px 0 0 grey;
  transform-origin: left;
  transform: rotate(-20deg);
  content: '';
  animation-duration: 20s;
  animation-name: stick-end;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.chassis {
  position: relative;
  width: 500px;
  height: 60px;
  background: linear-gradient(tomato 50%, red);
}

.body::before {
  position: absolute;
  top: 48px;
  right: 0;
  width: 250px;
  height: 10px;
  border-radius: 5px;
  background: radial-gradient( teal, white);
  content: '';
  animation-duration: 4s;
  animation-name: caulk;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.tube {
  position: relative;
  width: 520px;
  height: 50px;
  margin-left: 2px;
  background: linear-gradient(ivory, tan);
  transform: translateY(3px);
}

.tube::before {
  position: absolute;
  left: 100%;
  top: 100%;
  width: 100px;
  height: 25px;
  border-top-right-radius: 100% 5px;
  border-bottom-right-radius: 100% 5px;
  background: linear-gradient(to right, tan, wheat);
  transform: translateY(-50%);
  content: '';
}

.tube::after {
  position: absolute;
  left: calc(100% + 100px);
  top: 100%;
  width: 10px;
  height: 15px;
  border-top-right-radius: 100% 3px;
  border-bottom-right-radius: 100% 3px;
  background-color: wheat;
  transform: translateY(calc(-50% - 0px));
  content: '';
}

.cap {
  position: relative;
  width: 24px;
  height: 110px;
  background: var(--gradient)
}

.cap.right {
  height: 75px;
  border-radius: 5px 0 0 0;
  margin-left: -22px;
  transform: translateY(35px);
}

.cap.right::before {
  position: absolute;
  right: 0;
  bottom: 100%;
  width: 15px;
  height: 28px;
  border-top-left-radius: 100%;
  border-top-right-radius: 2px;
  background-color: tomato;
  content: '';
}

.cap.right::after {
  position: absolute;
  bottom: 0;
  left: 100%;
  width: 4px;
  height: 99px;
  border-top-right-radius: 100% 10px;
  border-bottom-right-radius: 100% 15px;
  background: var(--gradient);
  transform: translateY(-3px);
  content: '';
}

.handle {
  position: relative;
  width: 65px;
}

.handle>div {
  position: absolute;
  background: var(--gradient);
  border-top-left-radius: 100% 10px;
  border-bottom-right-radius: 90% calc(100% - 110px);
  border-bottom-left-radius: 10% 5px;
}

.handle>div:first-child {
  width: 55px;
  height: 220px;
  box-shadow: inset 0 75px 20px 0 red;
  transform-origin: top;
  transform: var(--handle-position) rotate(35deg);
  animation-duration: 4s;
  animation-name: handle;
  animation-iteration-count: infinite;
  /* animation-timing-function: linear; */
}

.handle>div:last-child {
  width: 65px;
  height: 310px;
  transform: skewX(-5deg);
  transform-origin: top right;
}

.handle>div:last-child::before {
  position: absolute;
  top: 0;
  right: 0;
  width: 35px;
  height: 110px;
  border-radius: 50% 0 0 0;
  background-color: tomato;
  transform-origin: top right;
  transform: skewX(5deg);
  content: '';
}

.handle>div:last-child::after {
  position: absolute;
  top: 100px;
  right: 50%;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: radial-gradient(silver, slategrey 3px, #4d4949 4px, slategrey 5px, silver);
  transform: translateX(50%) skewX(5deg);
  content: '';
}