What am I?

<div></div>

div {
  background-image: url(img/gene-kelly-dancing2.webp);
  background-position: 50%;
  background-size: 150%;

  background-color: white;
  color: black;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;

  --width: min(60dvw, 400px);
  width: var(--width);
  aspect-ratio: 4 / 3.8;

  display: grid;
  place-items: center;

  border-image-source: url("img/tv.webp");

  --top: 19%;
  --left: 19%;
  --right: 20%;
  --bottom: 34.3%;
  border-image-slice: var(--top) var(--right) var(--bottom) var(--left);

  border-image-width: 24% 20% 24% 20%;
  border-image-outset: calc(var(--width) / 3);

  animation: wobble 0.25s, switch 5s;
  animation-fill-mode: forwards;
  animation-direction: alternate, normal;
  animation-iteration-count: 2, 1;
  animation-delay: 0s, 1s;
}

@keyframes wobble {
  to {
    rotate: y 40deg;
  }
}

@keyframes switch {
  40% {
    background-image: url(img/static.webp);
  }

  50%,
  65% {
    background-size: unset;
  }

  65%,
  95% {
    background-image: url(img/happy-dance.webp);
    background-size: initial;
  }

  to {
    background-image: unset;
  }
}

div::after {
  content: "I'm just a div";
  font-size: 1.1rem;
  font-style: italic;

  opacity: 0;

  animation: reveal 5s;
  animation-delay: 1s;
  animation-fill-mode: forwards;
}

@keyframes reveal {
  99% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

body {
  margin: 0;
  height: 100dvh;

  display: grid;
  place-items: center;

  background-color: hsl(80, 100%, 50%);
}