CSS Animatable max-block-size Property Example

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

<h1>Animatable 'max-block-size' Property</h1>
<hr>
  
<p>Experience the changing max-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>