CSS Animatable min-block-size Property Example

<!DOCTYPE html>
<html>
<head>
<style> 
#container {
    color: #ff0;
    font-size: 20px;
    background: #333;
	box-shadow: 0 0 10px 0 #aaa;
  	min-block-size: 50px;
    animation: anim 5s infinite;
}
  
@keyframes anim {
  	50% {min-block-size: 250px;}
}
</style>
</head>
<body>

<h1>Animatable 'min-block-size' Property</h1>
<hr>
  
<p>Experience the changing min-block-size of the Container.</p>
  
<div id="container">
Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups. Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.
</div>

</body>
</html>