CodePen Embed - flex-shrink animation

<div class="parent">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

.parent{
  display: flex;
  border: 1px solid black;
  animation: woop 4s infinite;
}
.box{
  height: 100px;
  width: 100px;  
  background-color: tomato;
  border: 1px solid black;
  flex-grow: 1;
}
.box:first-child{
  background-color: mediumseagreen;
  flex-shrink: 2;
  
}
@keyframes woop{
  0%{
    width: 100%;
  }
  50%{
    width: 30%;
  }
  100%{
    width: 100%;
  }
}

This Pen is owned by Abhay Sharma on CodePen.

See more by @abhaysharma on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.