<img src="https://i.imgur.com/vrGxDvb.jpeg" alt="seasons">
body {
  margin: 0;
}

img {
  width: 100%;
  max-width: 100%;
  display: block;
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
  -webkit-mask-image: url("https://i.imgur.com/BXb0NIQ.png");    mask-image: url("https://i.imgur.com/BXb0NIQ.png");    
  -webkit-mask-size: 50%;
  mask-size: 50%;
  -webkit-mask-repeat: no-repeat;  
  mask-repeat: no-repeat;  
  animation: move 4s infinite forwards;
}


@keyframes move {
  
  0% {
    -webkit-mask-position: 0 0;  
    mask-position: 0 0;  
  }
   
  25% {
    -webkit-mask-position: top right;  
    mask-position: top right;  
  }
  
  50% {
    -webkit-mask-position: left bottom;       mask-position: left bottom;
  }
  
  75% {
    -webkit-mask-position: bottom right;  
    mask-position: bottom right;  
  } 
  
  100% {
    -webkit-mask-position: 0 0;  
    mask-position: 0 0;  
  }   
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.