CSS Animatable flex Property Example

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

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

<h1>Animatable 'flex' Property</h1>
<hr>
  
<p>Experience the changing flex (width) of the central element using flex property.</p>

<div id="container">
  <div id="one">One</div>
  <div id="two">Two</div>  
  <div id="three">Three</div>
</div>

</body>
</html>