CSS Animatable flex-basis 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-grow: 0;
  flex-shrink: 0;
  flex-basis: 50px;
}
#one {
  background: #ff7f7f;
}
#two {
  background: #7f7fff;
  animation: anim 5s infinite;
}

@keyframes anim {
   50% {flex-basis: 250px;}
}
</style>
</head>
<body>

<h1>Animatable 'flex-basis' Property</h1>
<hr>
  
<p>Experience the changing flex-basis property of 'two' between 50px to 250px.</p>

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

</body>
</html>