<div class="container">
  <h1>Animating a bird with container queries.</h1>
  <p>If the bird is flapping it's wings, your browser supports container queries :)</p>
</div>
<div class="birds-container">
  <svg class="bird bird-1" xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120"><path d="M38,40.1a2.26,2.26,0,0,0,0-2.84c-1.49-1.56-1.15-3.81-2.45-5.51-1.1-1.43,1-7.61,2.44-8.67.14-.1.37-.25.48-.2,2.27,1,5-.41,7.13,1.94,6.6,7.3,12.62,15.11,19.64,22.06a11.44,11.44,0,0,1,2.94,6c1,4.68,2.3,9.3,3.63,13.9,1,3.62,3,4.54,6.6,3.42,1.29-.4,2.52-1,3.82-1.33,4.75-1.11,8.67,1.31,10,6,.26.91-.15,1.32-.86,1.22-7.18-1-11.66,4.08-16.8,7.52-6.06,4.05-12.28,7.2-19.88,6.58-3.92-.33-7.85.26-11.82-.82-2.62-.71-5.51.57-8.14,1.45-2.48.83-4.84,2-7.28,3-.68.28-1.58,1-2.1-.09-.4-.87.34-1.52,1-2a82.21,82.21,0,0,1,11.44-8.16c3.06-1.74,6.08-3.56,9.19-5.22,1.25-.66.89-1.37.39-2.17A19.82,19.82,0,0,1,45,69.45c-1-5-3.66-9.27-6.55-13.24-2.35-3.21-3.22-7-5-10.34-.86-1.59-2.26-2.79-2.84-4.55-.45-1.37-.83-2.58.59-3.63s2.57-1.2,3.89,0C36,38.53,37,39.27,38,40.1Zm6.42-8.69c-2.72-1.18-4.3-3-6.75-3.58.39,2.79,3.58,3.14,4.24,5.57-2.18.27-3.07-2.06-5.44-2.12,1.65,1.59,2.44,3.33,4.09,4.33.48.29,1.51.87.55,1.25-2.26.9-.73,1.71-.13,2.51.71,1,2.18,1.72.25,2.94-.29.18-.23,1-.22,1.54a17.29,17.29,0,0,0,2,8.35,13.85,13.85,0,0,1,1.58,6.21,43.59,43.59,0,0,0,4.31,17.48c.81,1.61.46,2.59-.87,3.4a66.73,66.73,0,0,1-7.75,4.45c-3.22,1.4-5.83,3.72-9,5.93a6.82,6.82,0,0,0,1.29.29,2.88,2.88,0,0,0,1.06-.17c4.52-2,9-2,13.91-1.14,10.56,1.85,20.11-1.26,28.62-7.88,3.63-2.82,7.12-6.27,12.35-6,1.42.06,1.33-.85.88-1.84-1-2.25-4-3.35-7.06-2.48-1.73.5-3.41,1.26-5.17,1.61-3.31.65-5.24-.42-6.2-3.64-1.24-4.15-2.2-8.38-3.29-12.57-.84-3.25-1.69-6.45-4.24-8.93A158,158,0,0,1,51.15,33.12C49,30.44,46.53,28,44,25.23c-.44,1.33.85,2.07,0,3-1.57-.52-1.83-2.88-4.24-2.89C41.48,27.29,43.23,28.73,44.41,31.41Zm-.88,29.86c-.11-3.33-.37-6.5-2.11-9.4a8.17,8.17,0,0,1-1.14-3.31c-.44-4.22-1.79-7.59-6.6-8.36-.5-.08-.82-.52-1.38,0s-.33,1.07,0,1.62C36.49,48,38.65,55.25,43.53,61.27Z" fill="#fff"/></svg>
  
  
  <svg class="bird bird-2" xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120"><path d="M72.62,43.23a6.24,6.24,0,0,1,.11-2.38c.33-.7,1.12-1.59,1.77-1.64s1.47.85,1.77,1.53A16.94,16.94,0,0,1,77,44.15c.1,0,.28,0,.34,0,.74-.91,1.46-1.83,2.18-2.75.41,1.17,1.28,2.4,1.13,3.5-.48,3.7-1.35,7.35-2,11a6.63,6.63,0,0,0-.1,3.12c1.15,3.33-.21,5.72-2.57,7.83-.33.3-.87.47-1,.83a27,27,0,0,0-.93,2.8,8.69,8.69,0,0,0,2.83-.27c1.29-.57,2.38-1.57,3.62-2.26a5.32,5.32,0,0,1,7.35,2c.94,1.59,1.83,3.2,3.09,5.41-5.95-.65-8.54,4.09-12.58,6.27-4.6,2.49-9.12,5.25-14.54,5.71-3.61.3-7.27,1.18-10.84.91-8-.6-14.66,2.25-20.83,6.91-1.21.91-2.51,1.7-3.8,2.5-.18.12-.5,0-1.63,0a33.85,33.85,0,0,1,3-4.57c3.88-4.16,7.81-8.29,11.92-12.24,1.55-1.49,1.08-3,.59-4.41-1.71-4.85.13-7.79,4.91-10.93,2-1.3,3.7-2.22,3.82-5.14.08-1.81,1.66-3.68,2.89-5.27,1.78-2.28,3.85-4.35,5.81-6.49a45.45,45.45,0,0,1,4.71-4.89c.66-.53,2.09-.09,3.48-.09-.16.12,0,.05.11-.09.61-1,1.2-2.07,1.8-3.11.79.83,1.58,1.66,2.39,2.48a2.49,2.49,0,0,0,.45.29V54.34h-.81L70.6,42.46c-2.71,4-.77,8.09-.94,12.18-2.46-2.79-.58-7.63-4.21-9.78l-1,.3,1.57,7.35-.52.19L62.64,48l-1,.42,1.76,7.37L59.44,51l-.55.36,2.73,4.49-.7.5L57.8,53c-1.4,1.78-3,3.26-3.89,5.09-1.09,2.35-1.28,5.12-2.35,7.49a24.18,24.18,0,0,0-2.42,10.86A3.35,3.35,0,0,1,47.53,79c-6.09,2.56-10.15,7.48-14.47,12.11a11.92,11.92,0,0,0-1.22,2c4-1.94,7.63-4,11.5-5.51a17.73,17.73,0,0,1,7.54-1.22c7.35.61,14.57,0,21.16-3.18,5.54-2.68,10.57-6.4,15.82-9.66-1.47-5.25-4.31-6.27-8.56-3.13-.72.53-1.45,1.3-2.24,1.41A21.34,21.34,0,0,1,73,71.64a24.77,24.77,0,0,1,.41-4.24c.16-.67,1.12-1.1,1.61-1.73,1-1.36,2-2.77,3.27-4.58-2.94.22-2.52-1.12-2.14-2.36,1-3.24,2.11-6.45,3-9.73a41.17,41.17,0,0,0,.71-5.46l-.74-.12L76.57,51.8l-.65-.06c-.34-3.68-.68-7.35-1.08-11.61ZM49.07,66.48c-6,2.5-7.3,5.79-4,11.86a2.85,2.85,0,0,0,2.88-3C48.16,72.28,48.7,69.28,49.07,66.48Z" fill="#fff"/></svg>
  
  <svg class="bird bird-3" xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120"><path d="M78.33,89.79c1.87,1.1,3.19,2.3,1.73,4.74a3.34,3.34,0,0,0,.33,2.57c1.56,3.08,3.27,6.08,5,9.23-2.14,1-4,2.27-6.14,0-.52-.55-1.78-.57-2.69-.54-6.62.23-12.27-3-17.84-5.69-3.65-1.79-6.64-5.23-9.44-8.36-1.36-1.53-1.63-4-2.5-6.41-4.29.89-8.19,3.46-12.05,6.12-1.55,1.07-3,2.3-4.58,3.31a5.12,5.12,0,0,1-2,.32c.09-.69-.06-1.62.32-2,3.86-4,7.52-8.21,11.8-11.69a50.2,50.2,0,0,1,20.34-10.3c3.53-.81,7.3-.48,10.93-.94a37.51,37.51,0,0,0,7.64-1.69c7.43-2.6,10,1,12.67,5.92A6.21,6.21,0,0,1,92,76.79a16.39,16.39,0,0,0-2.32,0c-1.94.23-3.86.56-5.79.85l-.13,1c1.69.9,3.39,1.78,5.06,2.71s3.25,1.88,5.09,3l-.67,2a33,33,0,0,0,3.48,1.16c2.11.44,4.24.82,6.38,1.05,1.1.11,2.24-.22,3.35-.21,1.29,0,2.58.14,3.87.23l-1.4,3.44c1,.07,2.28.08,3.54.26.48.07.91.52,1.37.8-.35.49-.64,1.33-1,1.4-2,.31-4.07.86-6,.5-5.51-1.07-10.94-2.54-16.4-3.85-3.45-.82-6.89-1.69-10.37-2.38-.48-.1-1.16.74-1.74,1.15-2-.76-4-1.88-6.08-2.22-6.37-1-13-.73-19-3.7-.72-.35-2.82.34-2.94.85-.37,1.68-.84,4.08,0,5.16,3.43,4.3,7.29,8.27,12.78,10.09a34.67,34.67,0,0,1,6.7,2.58c3.45,2,7.34,1.27,10.94,2.25,1.33.36,1.68-.62,1-1.94-1.36-2.69-2.42-5.53-3.88-8.16A3.87,3.87,0,0,1,78.33,89.79Zm27.5,0a37.46,37.46,0,0,1-4.37,0c-4.23-.49-8.84-.89-11.54-4.44-2.19-2.88-5.15-4.12-7.88-6-2-1.36-3.76-3.11-5.71-4.57-1.47-1.1-3-2.6-4.66-2.88A24.81,24.81,0,0,0,55.22,74.7c-1.4.77-2.42,3.06-2.7,4.81-.35,2.09,1.57,3.06,3.46,3.38,7.44,1.25,14.89,2.38,22.31,3.66a90.52,90.52,0,0,1,10.85,2.29C94.6,90.49,100,92.3,105.83,89.84ZM89.77,74.42c-2.77-5.8-9.44-7.06-14.32-1.71a48.81,48.81,0,0,0,4.2,3.19,4.56,4.56,0,0,0,3,.8C85.08,76.14,87.42,75.2,89.77,74.42ZM34.18,89.33C38,87.44,41.71,85,45.77,83.83c3.73-1.07,5.53-2.69,5.25-6.52,0-.17-.1-.34-.18-.65C44.57,80,38.38,83.28,34.18,89.33Z" fill="#fff"/></svg>
  
  <svg class="bird bird-4" xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120"><path d="M27.92,94.24c2.24-2.64,4.2-5.59,6.76-7.86A68.71,68.71,0,0,1,54.9,73.69c3.93-1.56,6.39-4.39,9-7.46a30.06,30.06,0,0,1,6.39-5.62A4.09,4.09,0,0,1,74,61a53,53,0,0,1,6.24,6.38c1,1.22,2,1.94,3.76,1.73a6.92,6.92,0,0,1,6.67,3l3.6,5-.41.57-3.28-.51-.37.64c2.47,1.88,5,3.73,7.4,5.68a2.87,2.87,0,0,1,1.12,1.9c0,.4-1.08.78-1.77,1.24a28.88,28.88,0,0,1,2.73,2.54c.37.44.34,1.24.49,1.88a6,6,0,0,1-2.11.33,17,17,0,0,0-3.66-.93,20.53,20.53,0,0,1,1.79,2.05A5.26,5.26,0,0,1,96.66,94c-.56.11-1.23.48-1.66.29-1.35-.56-2.61-1.33-4-2.09l1.11,3.72c-.7,0-1.16.14-1.33,0C87.36,92.6,83,93.53,78.93,92.79c-2.81-.52-5.38-2.26-8.08-3.43A38.39,38.39,0,0,0,65.15,87a28,28,0,0,0-5.74-.48c-4-.13-8-.41-11.92-.22a22.3,22.3,0,0,0-15,6.85,20.44,20.44,0,0,1-3.61,2.32Zm64.2-8.84.53-.38c-1.48-1.69-3-3.37-4.43-5.1a17.17,17.17,0,0,1-1.44-2.12,21.84,21.84,0,0,0-1.91-3.3C82,71.17,79,68,76.1,64.69S70,61.08,67,64.48c-3.67,4.14-7.39,8.24-10.75,12.62-1.45,1.9-2,4.46-3.23,7.18,4.75.32,8.67.52,12.58.87a10.51,10.51,0,0,1,3.36,1c2.49,1.15,4.82,3,7.41,3.5S81.79,89.52,84,92l1-2.81,4.32,3.92a22.62,22.62,0,0,0-2.52-5c-2.16-3.5-2.16-3.5-1.67-4.86L91.46,90l.4-.31-4.52-7.4.76-.51ZM54.76,75.63c-6.29,1.9-18.7,10.18-19.93,13.45a32.83,32.83,0,0,1,15.43-5,3.21,3.21,0,0,0,2.1-1.76C53.3,80.23,54,78,54.76,75.63Zm35.73-.81c-1.43-3.32-3.69-4.53-6.65-3.6A7,7,0,0,0,90.49,74.82Z" fill="#fff"/></svg>
  
  <svg class="bird bird-5" xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120"><path d="M92.08,78.26c-5.12-2.62-8.59.66-12.52,2.8-5.07,2.77-9.79,6.43-15.75,7.2-2.6.34-5.37.89-7.84.35-9.6-2.13-18.34,0-26.79,4.46-1.26.67-2.78,2.35-4.11.57-.28-.38,1.25-2.7,2.4-3.44C33.15,86.51,39,83,44.78,79.53c1.61-1,2-1.85,2.19-3.85.55-6.45-4.26-10.51-6.18-15.81a52.62,52.62,0,0,1-2.45-8.18c-.34-1.76.23-3.67.18-5.51,0-1.6-.35-3.2-.54-4.8a6,6,0,0,1-.24-2.33,7.09,7.09,0,0,1,1.81-3c.28-.25,1.66.58,2.43,1.07,4.32,2.74,8.61,5.52,12.91,8.28,3.86,2.47,7.73,4.9,11.58,7.37,3,1.89,4,4.73,4.21,8.11.1,2.19.34,4.39.65,6.57.34,2.37,1.7,3.72,4.19,3.32a21.89,21.89,0,0,0,5.07-1.33c2.84-1.23,5.53-1.11,7.58,1.1,1.83,2,3.12,4.43,4.64,6.68ZM29.8,90.09l.38.7C32.08,90,34,89,35.9,88.34c4.9-1.73,9.79-2.75,15.16-2,7.73,1,15.42,1,22.45-3.58,4.78-3.11,9.91-5.65,15-8.53-.26-3.44-4.08-4.74-7.58-3.34a38.46,38.46,0,0,1-4.71,1.71c-2.89.73-4.9-.27-5.77-3.12a24.65,24.65,0,0,1-.94-6.23c-.17-4.23-1.47-7.74-5.27-10-2.71-1.64-5.35-3.41-8-5.07-3.95-2.44-7.92-4.84-12.67-7.74-.23,1.87-.92,3.45-.48,4.59,1.3,3.42.29,6.3-3.2,7.49A3.82,3.82,0,0,0,40,53.67c2.06,4.5,3.91,9.12,6.34,13.41,1.32,2.33,2.35,4.45,2.1,7.14-.08.85.4,1.77.27,2.6s-.41,2.33-1.09,2.75c-2.54,1.57-5.35,2.7-7.92,4.21C36.34,85.77,33.1,88,29.8,90.09Z" fill="#fff"/></svg>
  
</div>
<p><small>(Really: this isn't a great practice, it's just because I can xD <a href="https://utilitybend.com/blog/styling-based-on-container-width-made-possible-with-css-container-queries" target="_blank">Read more on my blog</a>)</small></p>

@keyframes containerWidth {
  0% {
    width: 120px;
  }
  85% {
    width: 123px;
  }
  100% {
    width: 124px;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Lato', sans-serif;
  font-size: 1.2rem;
  line-height: 1.5;
  color: #FEFEFE;
  background: #1f2937;
  text-align: center;
}


.birds-container {
  position: relative;
  width: 120px;
  height: 120px;
  margin: 0 auto 40px;
  container: bird/inline-size;
  animation: containerWidth .8s infinite ease-in;
}

.bird {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
}

@container bird (min-width: 120px) {
  .bird { display: none; }
  .bird-1 {
    display: block;
  }
}


@container bird (min-width: 121px) {
  .bird { display: none; }
  .bird-2 {
    display: block;
  }
}

@container bird (min-width: 122px) {
  .bird { display: none; }
  .bird-3 {
    display: block;
  }
}

@container bird (min-width: 123px) {
  .bird { display: none; }
  .bird-4 {
    display: block;
  }
}

@container bird (min-width: 124px) {
  .bird { display: none; }
  .bird-5 {
    display: block;
  }
}

/* general styling */

h1 {
  margin: 0 0 10px 0;
  font-family: 'Merriweather', serif;
  font-size: 1.6rem;
}

p {
  margin: 0;
}

a {
  color: darkorange;
}

.container {
  max-width: 1300px;
  margin: 0 auto;
  padding: 40px 20px;
}

small {
  font-size: .8rem;
}