<label class="switch">
  <input type="checkbox">
  <span class="slider">
    <span class="crib">
      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 477.76 422.82">
        <defs>
          <style>
            .cls-1,
            .cls-16,
            .cls-5 {
              fill: none;
            }

            .cls-2 {
              fill: #f5eee5;
            }

            .cls-3 {
              fill: #efdfd0;
              stroke: #efdfd0;
            }

            .cls-10,
            .cls-14,
            .cls-15,
            .cls-16,
            .cls-3,
            .cls-4,
            .cls-5,
            .cls-6,
            .cls-7,
            .cls-9 {
              stroke-miterlimit: 10;
            }

            .cls-15,
            .cls-4 {
              fill: #efdfd0;
            }

            .cls-15,
            .cls-16,
            .cls-4 {
              stroke: #f2a566;
            }

            .cls-4,
            .cls-5,
            .cls-6 {
              stroke-width: 4px;
            }

            .cls-5,
            .cls-6 {
              stroke: #f2a566;
            }

            .cls-6 {
              fill: #efdfd0;
            }

            .cls-7,
            .cls-8 {
              fill: #5c7064;
            }

            .cls-7 {
              stroke: #525954;
              stroke-width: 7px;
            }

            .cls-9 {
              fill: #525954;
              stroke: #5c7064;
              stroke-width: 0.75px;
              opacity: 0.70;
            }

            .cls-10 {
              fill: #9c859e;
              stroke: #565456;
              opacity: 0.51;
            }

            .cls-10,
            .cls-14,
            .cls-15,
            .cls-16 {
              stroke-width: 4px;
            }

            .cls-11 {
              fill: #47604b;
            }

            .cls-12 {
              fill: url(#radial-gradient);
            }

            .cls-13 {
              fill: url(#radial-gradient-2);
            }

            .cls-14 {
              fill: #7c6d5c;
              stroke: #6b563d;
            }

            .cls-17 {
              clip-path: url(#clip-path);
            }
          </style>
          <radialGradient id="radial-gradient" cx="-51.9" cy="179.85" fx="-61.543504613814896" r="33.06" gradientTransform="matrix(-1.16, 0, 0, 1.06, 244.39, -15.17)" gradientUnits="userSpaceOnUse">
            <stop offset="0.35" stop-color="#605160" />
            <stop offset="1" stop-color="#5c7064" />
          </radialGradient>
          <radialGradient id="radial-gradient-2" cx="166.99" cy="179.98" fx="157.34660464884305" r="33.06" gradientTransform="translate(-2.65 -15.17) scale(1.16 1.06)" xlink:href="#radial-gradient" />
          <clipPath id="clip-path" transform="translate(-7.23 0.15)">
            <rect class="cls-1" y="241.52" width="500" height="184" />
          </clipPath>
        </defs>
        <g id="Layer_2" data-name="Layer 2">
          <g id="Layer_1-2" data-name="Layer 1">
            <path id="Back_Crib" data-name="Back Crib" class="cls-2" d="M444.5,214.76C446.6,366.64,278,481.46,147.68,383.19,11.84,288.83,47.81,53,212.18,13.13,340.56-18.92,447.07,96.72,444.5,214.76Z" transform="translate(-7.23 0.15)" />
            <g id="Crib">
              <g id="Back">
                <g id="backpattern">
                  <g id="bl">
                    <path id="Left_Door" data-name="Left Door" class="cls-3" d="M250,56.54s-26.73-.73-51.47,6.73c-25.22,7.61-47.31,26-49.8,28.09A116.85,116.85,0,0,0,123,122.9a145.16,145.16,0,0,0-14.09,31c-6.83,21.51-9.41,48.43-5.15,63,1.28,4.39,9.57,12.64,58.1,21.66A419,419,0,0,0,250,245.27Z" transform="translate(-7.23 0.15)" />
                  </g>
                  <g id="br">
                    <path id="Right_Door" data-name="Right Door" class="cls-3" d="M250,56.54s26.73-.73,51.47,6.73c25.22,7.61,47.31,26,49.8,28.09A116.85,116.85,0,0,1,377,122.9a145.16,145.16,0,0,1,14.09,31c6.83,21.51,9.41,48.43,5.15,63-1.28,4.39-9.57,12.64-58.1,21.66A419,419,0,0,1,250,245.27Z" transform="translate(-7.23 0.15)" />
                  </g>
                </g>
              </g>
              <path id="Front_Crib" data-name="Front Crib" class="cls-4" d="M206.55,7.5C39.53,48,3,287.65,141,383.55,273.38,483.4,444.76,366.73,442.62,212.4,445.23,92.44,337-25.06,206.55,7.5Zm208,224.16c-1.45,5.39-10.81,15.52-65.58,26.59a519.36,519.36,0,0,1-101.26,9.93c-9,.34-50.29-.32-97.82-9.93-54.78-11.07-64.14-21.2-65.58-26.59-4.82-17.92-1.9-51,5.8-77.43a187.42,187.42,0,0,1,15.91-38,142.68,142.68,0,0,1,29.09-38.74c2.82-2.6,27.75-25.16,56.22-34.51,27.93-9.17,58.1-8.27,58.1-8.27s30.17-.9,58.1,8.27c28.47,9.35,53.4,31.91,56.21,34.51a142.43,142.43,0,0,1,29.09,38.74,187.42,187.42,0,0,1,15.91,38C416.46,180.66,419.37,213.74,414.56,231.66Z" transform="translate(-7.23 0.15)" />
              <path class="cls-5" d="M57.28,236.42c34.35,81.7,353.26,89.57,385.39-7.84" transform="translate(-7.23 0.15)" />
              <g id="Buttons">
                <rect class="cls-5" x="215.73" y="275.75" width="54.03" height="17.62" />
                <rect class="cls-5" x="223.2" y="280.54" width="8.05" height="8.05" />
                <rect class="cls-5" x="238.72" y="280.54" width="8.05" height="8.05" />
                <rect class="cls-5" x="254.23" y="280.54" width="8.05" height="8.05" />
              </g>
              <ellipse class="cls-6" cx="435.44" cy="235.41" rx="13.7" ry="29.1" />
              <ellipse class="cls-6" cx="435.44" cy="235.41" rx="7.47" ry="15.87" />
              <ellipse class="cls-6" cx="50.05" cy="235.41" rx="13.7" ry="29.1" />
              <ellipse class="cls-6" cx="50.05" cy="235.41" rx="7.47" ry="15.87" />
            </g>
            <g id="Grogu">
              <path class="cls-7" d="M478.46,149.1C451.84,145.39,387.74,135.73,343,123c-6.63-12.76-21.34-21.64-38.44-21.64a48.54,48.54,0,0,0-7.18.54,134.62,134.62,0,0,0-103.75.7,45.84,45.84,0,0,0-6.13-.41c-18.56,0-34.28,11.14-39.73,26.56C107.06,144.06,39.94,156.43,13.38,161c-3.31.56-3.6,6.24-.41,7.87,8.83,4.5,22.94-3.84,37.81,9.87,18.66,17.23,55.62,28.71,95.08,29.91,1.93,20.11,20.74,35.89,43.67,35.89H190a133.75,133.75,0,0,0,112.83-.12c1.11.07,2.23.13,3.37.13,24.21,0,43.85-17.6,43.85-39.3a35.74,35.74,0,0,0-.93-8.05c38-3.27,72.18-14.47,89.8-30.08,15.42-13.68,31-5.73,40.35-10.28C482.63,155.16,482.05,149.61,478.46,149.1Z" transform="translate(-7.23 0.15)" />
              <ellipse class="cls-8" cx="297.13" cy="138.7" rx="42.19" ry="36.81" />
              <ellipse class="cls-8" cx="180.07" cy="141.18" rx="41.78" ry="38.47" />
              <ellipse class="cls-8" cx="238.88" cy="174.89" rx="106.68" ry="82.52" />
              <ellipse class="cls-8" cx="182.14" cy="205.71" rx="43.85" ry="39.3" />
              <ellipse class="cls-8" cx="298.78" cy="205.71" rx="43.85" ry="39.3" />
              <path class="cls-9" d="M247.69,213.72s-12.25-7.92-12.25-12.25,12.25-12.25,12.25-12.25,12.25,7.92,12.25,12.25S247.69,213.72,247.69,213.72Z" transform="translate(-7.23 0.15)" />
              <g id="Ears">
                <g id="Left_Ear" data-name="Left Ear">
                  <path class="cls-8" d="M12.81,169.19c-3.2-1.63-2.9-7.31.41-7.88,35-6,140.16-25.51,162.88-47.39,14.65-14.11,30.21,89.18,11.39,92.34-53.05,8.88-111.67-3.92-136.88-27.2C35.75,165.34,21.64,173.69,12.81,169.19Z" transform="translate(-7.23 0.15)" />
                  <path class="cls-10" d="M34.78,166.54a1.89,1.89,0,0,1,1-3.55c21.71-.26,90-18.07,106.89-12.45,10.3,3.44,4.48,48.7-7.2,48.81-32.93.31-60.55-11.62-73.62-24C54.13,168.07,39.71,169.21,34.78,166.54Z" transform="translate(-7.23 0.15)" />
                </g>
                <g id="Right_Ear" data-name="Right Ear">
                  <path class="cls-8" d="M479.08,157.15c3.38-1.65,2.81-7.2-.79-7.71-38-5.29-152.38-22.73-177.88-43.79-16.43-13.58-28.62,87.82-8.17,90.61,57.64,7.84,120.32-5.64,146.49-28.83C454.16,153.75,469.76,161.7,479.08,157.15Z" transform="translate(-7.23 0.15)" />
                  <path class="cls-10" d="M460.38,155a1.89,1.89,0,0,0-1-3.56c-21.71-.26-90-18.07-106.89-12.44-10.3,3.43-4.48,48.7,7.2,48.81,32.93.3,60.55-11.63,73.63-24C441,156.52,455.46,157.66,460.38,155Z" transform="translate(-7.23 0.15)" />
                </g>
                <g id="Eyes">
                  <path class="cls-11" d="M342,175.28l-74.32,8.25C249.36,128.68,353.17,114.53,342,175.28Z" transform="translate(-7.23 0.15)" />
                  <path class="cls-12" d="M261.47,189.75S283.4,206,310.37,206c25.31,0,37.22-25.7,37.22-25.7s-9.53-31.5-35.54-34.45C283.76,142.68,261.47,189.75,261.47,189.75Z" transform="translate(-7.23 0.15)" />
                  <path class="cls-11" d="M154.28,175.28l74.32,8.25C246.88,128.68,143.07,114.53,154.28,175.28Z" transform="translate(-7.23 0.15)" />
                  <path class="cls-13" d="M233.9,189.89S212,206.19,185,206.19c-25.31,0-37.22-25.71-37.22-25.71S157.32,149,183.33,146C211.62,142.82,233.9,189.89,233.9,189.89Z" transform="translate(-7.23 0.15)" />
                  <path d="M223.29,187.31a69.45,69.45,0,0,1-36.57,10.62c-20.06,0-29.49-18.88-29.49-18.88s6.53-20.24,27.13-22.41C206.77,154.28,223.29,187.31,223.29,187.31Z" transform="translate(-7.23 0.15)" />
                  <path d="M274.6,187.71a69.49,69.49,0,0,0,36.57,10.61c20.06,0,29.49-18.87,29.49-18.87s-6.52-20.24-27.13-22.41C291.12,154.68,274.6,187.71,274.6,187.71Z" transform="translate(-7.23 0.15)" />
                  <path class="cls-2" d="M324.12,177.28c5.79,0,5.8-9,0-9s-5.8,9,0,9Z" transform="translate(-7.23 0.15)" />
                  <path class="cls-2" d="M196.16,177.28c5.79,0,5.8-9,0-9s-5.8,9,0,9Z" transform="translate(-7.23 0.15)" />
                </g>
              </g>
            </g>
            <g id="Robe">
              <path id="Robe-2" data-name="Robe" class="cls-14" d="M223.39,229.38S309.8,215.72,355,208.45c19.08-3.07-.61,28.92,16.39,44.47l-14.83,3.5-17.89,3.39-19,3.08-18.89,2.37-22.89,1.85-20.37.89H240.12l-14.22-.36-16.66-1.16Z" transform="translate(-7.23 0.15)" />
              <path id="Robe-3" data-name="Robe" class="cls-14" d="M119.46,251.39s5.91-45.6,32.92-37.81C198.81,227,267.79,224,251.43,225c-35.12,2.13-9.48,43.09-9.48,43.09l-37-1.85-17.26-1.78-14.52-2-18.66-3.07-12.37-2.52-10-2.3-9.23-2.36Z" transform="translate(-7.23 0.15)" />
            </g>
            <g id="Doors">
              <g id="Left">
                <path id="Left_Door-2" data-name="Left Door" class="cls-15" d="M249.5,31.45s-30.17-.92-58.11,8.37c-28.48,9.47-53.41,32.34-56.23,35A144.43,144.43,0,0,0,106.06,114a190.3,190.3,0,0,0-15.9,38.54c-7.71,26.77-10.63,60.28-5.81,78.44,1.44,5.46,10.8,15.73,65.59,27,53.88,11,99.56,8.39,99.56,8.39Z" transform="translate(-7.23 0.15)" />
                <path class="cls-16" d="M175.5,47c-25.81,85.42-32.82,173.11,46,180.36" transform="translate(-7.23 0.15)" />
                <line class="cls-15" x1="214.89" y1="33.42" x2="215.73" y2="265.85" />
              </g>
              <g id="Right">
                <path id="Right_Door-2" data-name="Right Door" class="cls-15" d="M249.5,31.45s30.17-.92,58.11,8.37c28.48,9.47,53.41,32.34,56.23,35A144.43,144.43,0,0,1,392.94,114a190.3,190.3,0,0,1,15.9,38.54c7.71,26.77,10.63,60.28,5.81,78.44-1.44,5.46-10.8,15.73-65.59,27-53.88,11-99.56,8.39-99.56,8.39Z" transform="translate(-7.23 0.15)" />
                <line class="cls-15" x1="270.38" y1="32.62" x2="271.21" y2="265.05" />
                <path class="cls-16" d="M323.5,47c25.81,85.42,33.32,173.11-45.47,180.36" transform="translate(-7.23 0.15)" />
              </g>
            </g>
            <g id="FrontBottom">
              <g class="cls-17">
                <g id="Crib-2" data-name="Crib">
                  <path id="Front_Crib-2" data-name="Front Crib" class="cls-4" d="M206.58,7.35C39.56,47.82,3,287.5,141.05,383.4c132.37,99.85,303.74-16.82,301.6-171.15C445.26,92.29,337-25.21,206.58,7.35Zm208,224.16C413.14,236.9,403.79,247,349,258.1A519.29,519.29,0,0,1,247.76,268c-9,.34-50.3-.32-97.83-9.93C95.15,247,85.79,236.9,84.35,231.51c-4.81-17.92-1.9-51,5.81-77.43a186.88,186.88,0,0,1,15.9-38,142.59,142.59,0,0,1,29.1-38.74c2.81-2.6,27.74-25.16,56.21-34.51,27.93-9.17,58.1-8.27,58.1-8.27s30.17-.9,58.1,8.27C336,52.15,361,74.71,363.78,77.31a142.59,142.59,0,0,1,29.1,38.74,186.88,186.88,0,0,1,15.9,38C416.49,180.51,419.4,213.59,414.59,231.51Z" transform="translate(-7.23 0.15)" />
                  <path class="cls-5" d="M57.31,236.27c34.35,81.7,353.26,89.57,385.39-7.84" transform="translate(-7.23 0.15)" />
                  <g id="Buttons-2" data-name="Buttons">
                    <rect class="cls-5" x="215.76" y="275.6" width="54.03" height="17.62" />
                    <rect class="cls-5" x="223.24" y="280.39" width="8.05" height="8.05" />
                    <rect class="cls-5" x="238.75" y="280.39" width="8.05" height="8.05" />
                    <rect class="cls-5" x="254.26" y="280.39" width="8.05" height="8.05" />
                  </g>
                  <ellipse class="cls-6" cx="435.47" cy="235.26" rx="13.7" ry="29.1" />
                  <ellipse class="cls-6" cx="435.47" cy="235.26" rx="7.47" ry="15.87" />
                  <ellipse class="cls-6" cx="50.08" cy="235.26" rx="13.7" ry="29.1" />
                  <ellipse class="cls-6" cx="50.08" cy="235.26" rx="7.47" ry="15.87" />
                </g>
              </g>
            </g>
          </g>
        </g>
      </svg>
    </span>
  </span>
</label>
html {
  height: 100%;
}
body {
  height: 100%;
  background: #cae0e6;
  display: grid;
  place-items: center;
}

.switch {
  position: relative;
  display: inline-block;
  width: 600px;
  height: 200px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 100px;
  background-image: linear-gradient(
    #ffdccb,
    #ffb987,
    #ffb16e,
    #ffc47c,
    #fff1aa
  );
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.crib {
  position: absolute;
  left: -11px;
  bottom: 6px;
  transition: 0.4s;
  z-index: 100;
  overflow: hidden;
}

svg {
  height: 180px;
  width: 210px;
}
#Crib {
  transform-origin: center;
}

#Left,
#Right {
  transform-origin: center;
  transition: 0.5s ease-in-out;
}

input:checked + .slider .crib {
  transform: translateX(410px);
}
input:checked + .slider .crib .right {
  transform: rotate(90deg) translate(60px);
}
input:checked + .slider .crib #Left {
  transform: rotate(-90deg) translate(-70px) scale(0.8);
}
input:checked + .slider .crib #Right {
  transform: rotate(90deg) translate(70px) scale(0.8);
}

#Grogu {
  transform-origin: center;
  transition: 0.8s ease-in-out;
  transition-delay: 0.2s;
  transform: translatey(51px) scale(0);
  filter: brightness(130%);
}
#Robe {
  transform-origin: center;
  transition: 0.8s ease-in-out;
  transition-delay: 0s;
  transform: translatey(51px) scale(0);
}

input:checked + .slider .crib #Robe {
  transform: translatey(0px) scale(1);
}

input:checked + .slider .crib #Grogu {
  transform: translatey(10px) scale(1);
  animation: head-tilt 3s ease-in-out;
  animation-delay: 1s;
}

@keyframes head-tilt {
  0% {
    transform: translatey(10px) scale(1);
  }
  25% {
    transform: rotate(-3deg) translatey(0px);
  }

  75% {
    transform: rotate(3deg) translatey(0px);
  }
  100% {
    transform: rotate(0deg) translatey(10px);
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.