<div class="device">
  <div class="device__a">
    <div class="device__a-1"></div>
    <div class="device__a-2"></div>
  </div>
  <div class="device__b"></div>
  <div class="device__c"></div>
  <div class="device__d"></div>
  <div class="device__e"></div>
  <div class="device__f"></div>
  <div class="device__g"></div>
</div>
$debug: false;
$blur-in: blur(0.1875em);
$blur-out: blur(0.375em);
$ease-in: cubic-bezier(0.33,0,0.67,0);
$ease-out: cubic-bezier(0.33,1,0.67,1);
$ease-in-out: cubic-bezier(0.65,0,0.35,1);
$steps-start: steps(1,start);
$steps-end: steps(1,end);

* {
  border: 0;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
:root {
  --hue: 223;
  --bg: hsl(var(--hue),10%,90%);
  --fg: hsl(var(--hue),10%,10%);
  --trans-dur: 0.3s;
  font-size: calc(28px + (60 - 28) * (100vw - 280px) / (3840 - 280));
}
body {
  background-color: var(--bg);
  color: var(--fg);
  display: grid;
  place-items: center;
  font: 1em/1.5 sans-serif;
  height: 100vh;
  transition:
    background-color var(--trans-dur),
    color var(--trans-dur);
}
.device {
  @if $debug == true {
    outline: 1px solid;
  }
  position: relative;
  width: 4em;
  height: 4em;

  &__a,
  &__a-1,
  &__a-2,
  &__b,
  &__c,
  &__d,
  &__e,
  &__f,
  &__g {
    $dur: 3s;
    @if $debug == true {
      $dur: $dur * 4;
      opacity: 0.5;
    }
    animation: device-a $dur $ease-in-out infinite;
    position: absolute;
    transition:
      background-color var(--trans-dur),
      box-shadow var(--trans-dur);
  }
  &__a,
  &__d,
  &__e {
    background-color: hsl(var(--hue),10%,70%);
    box-shadow: 0 0 0 0.25em inset;
  }
  &__a {
    border-radius: 0.375em;
    top: 0;
    width: 4em;
    height: 2.5em;
    z-index: 1;

    &-1,
    &-2 {
      visibility: hidden;
    }
    &-1 {
      animation-name: device-a-1;
      top: 2.25em;
      left: 1.5em;
      width: 1em;
      height: 0.25em;
    }
    &-2 {
      animation-name: device-a-2;
      top: 0.625em;
      right: 0;
      width: 0.25em;
      height: 0.75em;
    }
  }
  &__a-1,
  &__a-2,
  &__b,
  &__c,
  &__f,
  &__g {
    background-color: var(--fg);
    border-radius: 0.125em;
  }
  &__b {
    animation-name: device-b;
    top: 2.25em;
    left: 1.875em;
    width: 0.25em;
    height: 1em;
  }
  &__c {
    animation-name: device-c;
    top: 3em;
    left: 1em;
    width: 2em;
    height: 0.25em;
  }
  &__d,
  &__e {
    left: 1.25em;
    width: 1.5em;
    height: 0.875em;
    visibility: hidden;
  }
  &__d {
    animation-name: device-d;
    border-radius: 0.375em 0.375em 0 0;
    top: 0.75em;
  }
  &__e {
    animation-name: device-e;
    border-radius: 0 0 0.375em 0.375em;
    top: 1.625em;
  }
  &__f,
  &__g {
    filter: $blur-out;
    bottom: 0;
    height: 0.25em;
  }
  &__f {
    animation-name: device-f;
    opacity: 0.5;
    left: 1em;
    width: 2em;
  }
  &__g {
    animation-name: device-g;
    opacity: 0;
    left: 0;
    width: 4em;
  }
}
/* Dark theme */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: hsl(var(--hue),10%,10%);
    --fg: hsl(var(--hue),10%,90%);
  }
  .device {
    &__a,
    &__d,
    &__e {
      background-color: hsl(var(--hue),10%,30%);
    }
  }
}
/* Animations */
@keyframes device-a {
  from,
  to {
    animation-timing-function: $ease-in;
    left: 0;
    width: 4em;
    height: 2.5em;
    transform: translateY(0);
  }
  12.5% {
    animation-timing-function: $ease-out;
    left: 0;
    width: 4em;
    height: 2.5em;
    transform: translateY(1.5em);
  }
  25% {
    animation-timing-function: $ease-in;
    left: 0;
    width: 4em;
    height: 2.5em;
    transform: translateY(0.375em);
  }
  37.5% {
    animation-timing-function: $ease-out;
    left: 0;
    width: 4em;
    height: 2.5em;
    transform: translateY(1.5em);
  }
  50% {
    animation-timing-function: $ease-in;
    left: 1em;
    width: 2em;
    height: 3em;
    transform: translateY(0.125em);
  }
  62.5% {
    animation-timing-function: $ease-out;
    left: 1em;
    width: 2em;
    height: 3em;
    transform: translateY(1em);
  }
  75% {
    animation-timing-function: $ease-in;
    left: 1em;
    width: 2em;
    height: 2em;
    transform: translateY(0.625em);
  }
  87.5% {
    animation-timing-function: $ease-out;
    left: 1em;
    width: 2em;
    height: 2em;
    transform: translateY(1.375em);
  }
}
@keyframes device-a-1 {
  from {
    animation-timing-function: $steps-end;
    left: 1.5em;
    width: 1em;
    transform: translateY(0);
    visibility: hidden;
  }
  12.5% {
    animation-timing-function: $ease-out;
    left: 1.5em;
    width: 1em;
    transform: translateY(0);
    visibility: visible;
  }
  25%,
  37.5% {
    animation-timing-function: $ease-out;
    left: 1.5em;
    width: 1em;
    transform: translateY(-0.5em);
    visibility: visible;
  }
  50%,
  62.5% {
    animation-timing-function: $ease-out;
    left: 0.875em;
    width: 0.25em;
    transform: translateY(0);
    visibility: visible;
  }
  75%,
  to {
    animation-timing-function: $ease-out;
    left: 0.875em;
    width: 0.25em;
    transform: translateY(-0.5em);
    visibility: hidden;
  }
}
@keyframes device-a-2 {
  from {
    animation-timing-function: $steps-end;
    transform: translate(0,0.375em);
    visibility: hidden;
  }
  62.5% {
    animation-timing-function: $ease-out;
    transform: translate(0,0.375em);
    visibility: visible;
  }
  75%,
  87.5% {
    animation-timing-function: $ease-out;
    transform: translate(0.375em,0);
    visibility: visible;
  }
  to {
    transform: translate(0,0.25em);
    visibility: visible;
  }
}
@keyframes device-b {
  from,
  to {
    animation-timing-function: $ease-in;
    transform: translateY(0);
    visibility: visible;
  }
  10%,
  12.5% {
    animation-timing-function: $steps-start;
    transform: translateY(0.75em);
    visibility: visible;
  }
  25% {
    animation-timing-function: $steps-start;
    top: 2.25em;
    left: 1.875em;
    transform: translateY(0.75em);
    visibility: hidden;
  }
  87.5% {
    animation-timing-function: $ease-out;
    transform: translateY(0.75em);
    visibility: hidden;
  }
}
@keyframes device-c {
  from,
  to {
    animation-timing-function: $ease-in;
    transform: translateY(0);
    visibility: visible;
    width: 2em;
  }
  10%,
  12.5% {
    animation-timing-function: $steps-start;
    transform: translateY(0.75em);
    visibility: visible;
    width: 2em;
  }
  25% {
    animation-timing-function: $steps-start;
    top: 3em;
    left: 1em;
    width: 2em;
    transform: translateY(0.75em);
    visibility: hidden;
      width: 2em;
  }
  87.5% {
    animation-timing-function: $ease-out;
    left: 1.5em;
    transform: translateY(0.75em);
    visibility: hidden;
    width: 1em;
  }
}
@keyframes device-d {
  from {
    animation-timing-function: $steps-end;
    transform: translateY(0.25em);
    visibility: hidden;
  }
  62.5% {
    animation-timing-function: $ease-out;
    transform: translateY(0.25em);
    visibility: visible;
  }
  75% {
    animation-timing-function: $ease-in;
    transform: translateY(-0.75em);
  }
  87.5% {
    animation-timing-function: $ease-out;
    transform: translateY(0);
  }
  to {
    transform: translateY(-0.75em);
  }
}
@keyframes device-e {
  from {
    animation-timing-function: $steps-end;
    transform: translateY(1.5em);
    visibility: hidden;
  }
  62.5% {
    animation-timing-function: $ease-out;
    transform: translateY(1.5em);
    visibility: visible;
  }
  75% {
    animation-timing-function: $ease-in;
    transform: translateY(0.75em);
  }
  87.5% {
    animation-timing-function: $ease-out;
    transform: translateY(1.5em);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes device-f {
  from {
    animation-timing-function: $ease-in;
    filter: $blur-out;
  }
  12.5% {
    animation-timing-function: $ease-out;
    filter: $blur-in;
    opacity: 0.5;
  }
  25%,
  to {
    filter: $blur-out;
    opacity: 0;
  }
}
@keyframes device-g {
  from,
  12.5% {
    animation-timing-function: $ease-out;
    background-color: var(--fg); // needed to fix a glitch in Safari
    filter: $blur-in;
    opacity: 0;
  }
  25% {
    animation-timing-function: $ease-in;
    background-color: var(--fg); // same as above
    filter: $blur-out;
    opacity: 0.5;
  }
  37.5% {
    animation-timing-function: $ease-out;
    filter: $blur-in;
    opacity: 0.5;
    left: 0;
    width: 4em;
  }
  50%,
  75%,
  to {
    animation-timing-function: $ease-in;
    filter: $blur-out;
    opacity: 0.5;
    left: 1em;
    width: 2em;
  }
  62.5%,
  87.5% {
    animation-timing-function: $ease-out;
    filter: $blur-in;
    opacity: 0.5;
    left: 1em;
    width: 2em;
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.