CSS Animatable background Property Example

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

@keyframes anim {
	50% {background: yellow bottom center/150px 150px;}
}
</style>
</head>
<body>

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

<p>Experience the gradually changing the background color and image-size using the background property:<p>
<div id="image"></div>

<p>The background property is a shorthand property for all background properties.</p>
<p>The background-color, background-position, and background-size properties are <em>animatable</em> in CSS.</p>

</body>
</html>