CSS Animatable flex-shrink Property Example

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

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

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

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

</body>
</html>