CORE music ::Happy-Csser

/*Downloaded from https://www.codeseek.co/yuanyu/core-music-happy-csser-RjXqBV */
body {
  height: 100vh;
  margin: 0;
  border: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.outer {
  font-size: 100px;
  width: 4.6em;
  height: 1em;
  border: 1px solid red;
  position: relative;
}

.c {
  position: absolute;
  background-color: transparent;
  height: .5em;
  width: .5em;
  border: 0.25em solid black;
  border-radius: 50%;
}

.o {
  position: absolute;
  top: -.575em;
  left: .725em;
  height: .75em;
  width: .75em;
  background-color: black;
  border-radius: 50%;
  border: .7em solid white;
  -webkit-animation: scaleDown .4s ease-in-out;
          animation: scaleDown .4s ease-in-out;
}
.o::before {
  content: '';
  display: block;
  height: .25em;
  width: .25em;
  background-color: white;
  position: absolute;
  left: .25em;
  top: .25em;
  border-radius: inherit;
}

.r {
  position: absolute;
  left: 2.75em;
  height: 1em;
  width: .25em;
  background-color: black;
}
.r::before {
  position: absolute;
  content: '';
  height: 1em;
  width: .25em;
  left: .375em;
  -webkit-transform: skew(30deg);
          transform: skew(30deg);
  background-color: black;
}
.r::after {
  position: absolute;
  content: '';
  height: .25em;
  width: .25em;
  background-color: white;
  border: 0.25em solid black;
  border-radius: 0 50% 50% 0;
}

.e {
  position: absolute;
  left: 3.85em;
  height: 1em;
  width: .25em;
  background-color: black;
}
.e::before {
  content: '';
  display: block;
  position: absolute;
  height: .25em;
  width: .75em;
  left: 0em;
  background-color: black;
  box-shadow: -.04em 0.35em 0em -.04em black, 0em 0.75em black;
}

@-webkit-keyframes border-change {
  0% {
    border-width: 2em;
  }
  100% {
    border-width: .378em;
  }
}

@keyframes border-change {
  0% {
    border-width: 2em;
  }
  100% {
    border-width: .378em;
  }
}
@-webkit-keyframes scaleDown {
  0% {
    opacity: 0;
    -webkit-transform: scale(4);
            transform: scale(4);
  }
  50% {
    opacity: 1;
    -webkit-transform: scale(3);
            transform: scale(3);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes scaleDown {
  0% {
    opacity: 0;
    -webkit-transform: scale(4);
            transform: scale(4);
  }
  50% {
    opacity: 1;
    -webkit-transform: scale(3);
            transform: scale(3);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}