shapes - bird animation

              <div>
                <div class="container">
                    <div class="body"></div>
                    <div class="mouth"></div>
                    <div class="beak"></div>
                    <div class="feather"></div>
                    <div class="tail"></div>
                    <div class="leg"></div>
                </div>
            </div>
            <style>
              :root {--body: #ff533e; --mouth: #000000; --feather: #939393; --beak-top: #e9581a; --beak-down: #aa4c21;
              --leg: #00adef; --body-color: #e3edf7;}
              .container { background: var(--body-color); font-family: sans-serif; height: 50vh; width: 50vw; display: flex;
              align-items: center; justify-content: center; position: absolute;}
              .body,  .mouth,  .feather,  .tail, .beak, .mouth::before, .mouth::after, .leg, .leg::after, .leg::before {
              position: absolute;}
              .body,  .mouth, .feather, .beak, .mouth::before, .mouth::after  {border-radius: 50%;}
              .body {top: 26px; left: 50px; height: 180px; width: 200px;transform: rotate(-17deg); 
                background: linear-gradient(to bottom, transparent 0%, transparent 20%, var(--body) 20%); z-index: 2;}
              .mouth { background:  var(--mouth); top: 20px; left: -175px; width: 100px; 
                height: 100px; transform: rotate(-17deg);
              z-index: 5;  animation: animate-mouth 1.5s forwards; animation-delay: 2s; }
    
              @keyframes animate-mouth {
                  100% {left: 175px;}
              }
              .mouth::before {content: ""; width: 30px; height: 30px; background: white; position: absolute; 
              top: 20px; left: 40px;}
              .mouth::after {content: ""; width: 10px; height: 10px; background: black; position: absolute; 
              top: 30px; left: 55px;
                  animation: animate-eye 1s infinite; animation-delay: 4s;}
              @keyframes animate-eye {
                  50% { height: 5px;}
              }
              .feather {z-index: 4; left: 44px; top: -206px; width: 150px; height: 150px; 
                background: linear-gradient(to bottom, transparent 0%, transparent 50%, var(--feather) 50%); 
                transform: rotate(-17deg); animation: animate-feather 1.5s forwards; animation-delay: 2s;}
              @keyframes animate-feather {
                  100% { top: -6px; }
              }
              .tail {width: 150px; height: 60px; background-color: var(--mouth); 
                clip-path: polygon(0% 0%, 100% 0%, 100% 100%); top: 92px; left: 324px; transform: rotate(-17deg); 
                z-index: 3; animation: animate-tail 1.5s forwards; animation-delay: 2s;}
              @keyframes animate-tail {
                  100% {left: -24px;}
              }
              .beak {height: 100px; width: 100px; background: linear-gradient(to bottom, var(--beak-top) 0%, 
                var(--beak-top) 15%, transparent 15% ); left: 224px; top: 240px; z-index: -1; 
                transform: rotate(-17deg); animation: animate-beak 1.5s forwards; animation-delay: 2s;
              }
              @keyframes animate-beak {
                  100% {top: 40px;}
              }
              .leg {background: var(--leg); height: 50px; width: 10px; border-radius: 10px; top: 515px; 
                left: 125px; transform: rotate(-15deg); z-index: 1; animation: animate-leg 1.5s forwards; 
                animation-delay: 2s;}
              @keyframes animate-leg {
                  100% { top: 215px;}
              }
              .leg::before {bottom: -8px;  content: "";  width: 40px; height: 9px; 
              background: var(--leg); border-radius: 10px;
                  transform: rotate(15deg); z-index: -1; }
              .leg::after { top: -8px; content: ""; width: 30px; height: 9px; 
              background: var(--leg); border-radius: 10px;  transform: rotate(-15deg); z-index: -1;}
            </style>