CSS Animatable flex-grow Property Example

<!DOCTYPE html>
<html>
<head>
<style> 
#container {
  width: 300px;
  height: 250px; 
  display: flex; 
  box-shadow: 0 0 10px 0 #aaa;
}
#one, #two, #three {
  flex-grow: 1;
}
#one {
  background: #ff7f7f;
}
#two {
  background: #7f7fff;
  animation: anim 5s infinite;
}
#three {
  background: #99ff99;
}

@keyframes anim {
  50% {
    flex-grow: 8;
  }
}
</style>
</head>
<body>

<h1>Animatable 'flex-grow' Property</h1>
<hr>
  
<p>Experience the changing flex-grow property of 'two' between 1 to 8 value.</p>

<div id="container">
  <div id="one"></div>
  <div id="two"></div>  
  <div id="three"></div>
</div>

</body>
</html>