CSS Animatable margin-inline Property Example

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  	width: 70px;
    height: 100px;
    line-height: 100px;
    float: left;
  	margin: 10px;
  	padding: 5px;
    box-shadow: 0 0 10px 0 #aaa;
    text-align: center;
    color: #fff;
}
  
#container {
    background: #333;
    animation: anim 5s infinite;
}
  
#left{
    background: #f00;
}
  
#right {
    background: #00f;
}

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

<h1>Animatable 'margin-inline' Property</h1>
<hr>
  
<p>Experience the changing margin-inline from 10px to 50px on sides of the container.<p>
  
<div id="left">LEFT</div>
<div id="container">Container</div>
<div id="right">RIGHT</div>
</body>
</html>