CSS Animatable grid-area Property Example

<!DOCTYPE html>
<html>
<head>
<style> 
#container {
    display: grid;
    grid-template-columns: auto auto auto auto;
    background: #333;
    grid-gap: 5px;
    padding: 5px;
	box-shadow: 0 0 10px 0 #aaa;
    animation: anim 5s infinite;
}

.grid-item {
    text-align: center;
    padding: 20px 0;
    font-size: 20px;
    background: #97ff99;
}

#container .grid-item:first-child {
    grid-area: 2 / 1 / span 2 / span 3;
    animation: anim 5s infinite;
}

@keyframes anim { 
    50% {grid-area: 1 / 2 / span 3 / span 2;}
}
</style>
</head>
<body>

<h1>Animatable 'grid-area' Property</h1>
<hr>
  
<p>Experience the changing area of first 'grid-item' which is transitioning between<br>
'Row : 2, Column : 1, Row Span : 2, Column Span : 3'<br> 
and<br> 
'Row : 1, Column : 2, Row Span : 3, Column Span : 2'</p>

<div id="container">
	<div class="grid-item">1</div>
	<div class="grid-item">2</div>
	<div class="grid-item">3</div>  
	<div class="grid-item">4</div>
	<div class="grid-item">5</div>
	<div class="grid-item">6</div>
	<div class="grid-item">7</div>
</div>

</body>
</html>