CSS Animatable background-position Property Example

<!DOCTYPE html>
<html>
<head>
<style> 
#image {
	width: 300px;
	height: 200px;
	background: yellow url('https://www.tutsinsider.com/images/Tuts-Insider-Logo.png');
    background-position: top left;
    background-size: 20px;
	animation: anim 5s infinite;
	box-shadow: 0 0 10px 0 #ddd;
	margin: auto;
}

@keyframes anim {
	50% {background-position: bottom right;}
}
</style>
</head>
<body>

<h1>Animatable 'background-position' Property</h1>
<hr>

<p>Experience the changing position of the background image.<p>
<div id="image"></div>

</body>
</html>