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

#stem-leaf {
  animation-name: movement;
  animation-duration: 1.4s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes movement {
  from {
    translate: -12px 0;
  }
  to {
    translate: 12px 0;
  }
}

#flower_1,
#flower_2,
#flower_3,
#flower_4,
#flower_5 {
  display: inline-block;
  animation-name: color-flower;
  animation-duration: 1.4s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  transform-box: content-box;
}

@keyframes color-flower {
  0% {
    transform: translate(-13px, 0px) scale(1);
  }
  50% {
    fill: rgb(255, 47, 127);
    scale: 1.1;
  }
  100% {
    transform: translate(10px, 0px) scale(1.2);
    fill: orange;
  }
}

#body {
  animation-name: dance;
  animation-duration: 0.8s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
}

@keyframes dance {
  0% {
    translate: 0px -8px;
  }
  100% {
    translate: 0px 8px;
  }
}

#pupil {
  animation-name: glance;
  animation-duration: 1s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
}

@keyframes glance {
  0% {
    translate: 0px -6px;
  }
  100% {
    translate: 14px 12px;
  }
}

#foot-left {
  animation-name: foot-left;
  animation-duration: 0.8s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
}
@keyframes foot-left {
  0% {
    translate: 0px -25px;
  }
  100% {
    translate: 0;
  }
}
#foot-right {
  animation-name: foot-right;
  animation-duration: 0.8s;
  animation-delay: 1s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
}

@keyframes foot-right {
  0% {
    translate: 0px -30px;
  }
  100% {
    translate: 0;
  }
}

#headphones-right,
#headphones-left {
  animation-name: size-headphones;
  animation-duration: 0.3s;
  animation-delay: 1s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  transform-box: border-box;
}
@keyframes size-headphones {
  0% {
    transform: translate(0) scale(1);
  }
  100% {
    transform: translate(0px, -3px) scale(1.1);
  }
}
#hair {
  animation-name: hair-move;
  animation-duration: 1s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  transform-box: content-box;
}

@keyframes hair-move {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, -10px) scale(1.2);
  }
  100% {
    transform: translate(15px, -10px) scale(1.5);
  }
}
#melody-big,
#melody-min {
  animation-name: melody-moveMin;
  animation-duration: 2s;
  animation-direction: alternate;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  transform-box: content-box;
}

@keyframes melody-moveMin {
  0% {
    transform: translate(0);
  }
  25% {
    transform: translate(30px, -10px) scale(0.8);
  }
  50% {
    transform: translate(60px, -40px) scale(0.7);
  }
  100% {
    transform: translateY(90px, 20px) scale(0.6);
  }
}

#sun {
  animation-name: sun-move;
  animation-duration: 20s;
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;
  animation-delay: 5s;
  transform-origin: bottom;
}

@keyframes sun-move {
  0% {
  }
  25% {
    transform: translate(100px, -20px) rotate(220deg) scale(0.1);
  }

  50% {
    transform: rotate(360deg);
    fill: rgba(251, 255, 0, 0.959);
  }
  100% {
    transform: rotate(360deg) scale(1);
    fill: rgb(255, 81, 0);
  }
}