canary sings

by Soviut

HTML

<div class="center">
  <div class="loading">
    <div class="note note-left"></div>
    <div class="note note-right"></div>
    <div class="canary"></div>
  </div>
</div>

CSS

body {
  padding: 0;
  margin: 0;
  background: #0f172a;
}

.center {
  display: flex;
  width: 100vw;
  height: 100vh;
  align-items: center;
  justify-content: center;
}

.loading {
  position: relative;
  width: 150px;
  height: 150px;
}

.canary {
  position: absolute;
  top: 50px;
  left: 50px;
  width: 50px;
  height: 50px;

  background: #fbbf24;
  border-radius: 0 50%;
  
  transform-origin: 50% 100%;
  animation: flip 3s ease-out infinite;
}

.canary::after {
  content: '';
  position: absolute;
  top: 20%;
  left: 35%;
  display: block;
  width: 5px;
  height: 5px;
  
  background: #0f172a;
  border-radius: 100%;
}

.note {
  position: relative;
  width: 10px;
  height: 10px;
  
  background: #14b8a6;
  border-radius: 50% 0;
}

.note::after {
  content: '';
  display: block;
  position: absolute;
  right: 0;
  top: -15px;
  height: 15px;
  width: 2px;
  
  background: #14b8a6;
}

.note-left {
  position: absolute;
  top: 40px;
  left: 30px;

  animation: floatup 3s ease-out forwards infinite;
}

.note-right {
  position: absolute;
  top: 40px;
  left: 110px;

  animation: floatup 3s ease-out forwards infinite 1.5s;
}

@keyframes flip {
  0%   { transform: scale(1, 1); }
  5%   { transform: scale(0, 0.8); }
  8%   { transform: scale(-1, 1.1); }
  10%  { transform: scale(-1, 1); }

  50%  { transform: scale(-1, 1); }
  55%  { transform: scale(0, 0.8); }
  58%  { transform: scale(1, 1.1); }
  60%  { transform: scale(1, 1); }

  100% { transform: scale(1, 1); }
}

@keyframes floatup {
  0% { transform: translateY(0%); opacity: 0; }

  60% { transform: translateY(0%) scale(0.7); }

  59% { opacity: 0; }
  60% { opacity: 1; }
  90% { opacity: 1; }

  90% { transform: translateY(-200%); }

  100% { transform: translateY(-200%); opacity: 0; }
}