CSS Animatable aspect-ratio-property Example

<!DOCTYPE html>
<html>
<head>
<style>
/*
========== Style Start ==========
*/
#container {
	height: 250px;
	width: 300px;
	margin: auto;
	box-shadow: 0 0 10px 0 #ddd;
}

#item {
	height: 150px;
	margin-top: 30px;
	background-color: #f00;
	aspect-ratio: 1;
	animation: mymove 5s infinite;
}

@keyframes mymove {
	33% {aspect-ratio: 0.5;}
	66% {aspect-ratio: 2;}
}

#original--item {
	position: absolute;
	margin-top: 30px;
	z-index: -1;
	height: 150px;
	aspect-ratio: 1;
	background-color: #0f0;
}
/*
========== Style End ==========
*/
</style>
</head>
<body>

<h1>Animatable aspect-ratio property</h1>
<hr>

<p>Gradually changes the 'aspect-ratio' property from "1" to "0.5" to "2", and back:<p>
<p><b>Note: </b>The 'green Item' element indicates where the 'Container' element would be with "1" as value for aspect-ratio property.</p>

<div id="container">Container
	<div id="original--item">Item</div> 
	<div id="item">Item</div>
</div>

</body>
</html>