CSS Animatable margin-block Property Example

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  	margin: 10px;
  	padding: 10px;
    box-shadow: 0 0 10px 0 #aaa;
    text-align: center;
    color: #fff;
}

#container {
    background: #333;
    animation: anim 5s infinite;
}

#top{
    background: #f00;
}

#bottom {
    background: #00f;
}

@keyframes anim {
  	50% {margin-block: 30px 100px;}
}
</style>
</head>
<body>

<h1>Animatable 'margin-block' Property</h1>
<hr>
  
<p>Experience the changing margin-block of the container from 10px to 30px on top and 10px to 100px on bottom of the container.<p>
  
<div id="top">Top</div>
<div id="container">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
<div id="bottom">Bottom</div>
</body>
</html>