Animate CSS flex-basis property

To implement animation on flex-basis property with CSS, you can try to run the following code


Live Demo

<!DOCTYPE html>
   .box {
      display: flex;
      background-color: green;
   .box > div {
      background-color: white;
      text-align: center;
      line-height: 40px;
      font-size: 25px;
      width: 100px;
      margin: 5px;
   div {
      animation: myanim 4s infinite;
   @-webkit-keyframes myanim {
      50% {
         flex-basis: 100px;
   <div class = "box">
      <div style = "flex-basis: 350px">Q4</div>