CSS Animatable object-position Property Example

<!DOCTYPE html>
<html>
<head>
<style> 
#image {
  display: block;
  width: 300px;
  height: 300px;
  margin: auto;
  object-fit: cover;
  object-position: 0% 0%;
  animation: anim 5s infinite;
}  

@keyframes anim {
  0% {
    object-position: 0% 0%;
  }
  25% {
    object-position: 20% 0%;
  }
  100% {
    object-position: 100% 100%;
  }
}
</style>
</head>
<body>

<h1>Animatable 'object-position' Property</h1>
<hr>
  
<p>Experience the changing object-position of the image.</p>
  
<img src="images/coast.jpg" alt="Coast" id="image">

</body>
</html>