JSFiddle - React, Tailwind, and code Playground

by blineberry

HTML

<div><img src="http://placekitten.com/800/800" /></div>

CSS

div { 
    height:400px;
    width: 400px;
    position: relative;
    overflow: hidden;
    
    -webkit-mask-position: 0 0;
    -webkit-mask-size: 400px 400px;
    -webkit-mask-image: -webkit-gradient(radial, 50% 50%, 30, 50% 50%, 200, from(#fff), to(rgba(0,0,0,0)));
    
   
}

img {
    position: absolute;
    top: 0;
    left: 0;
    
    -webkit-animation: move-image 4s infinite;
}

@-webkit-keyframes move-image {
    0% {
        top: 0;
        left: 0;
    }
    50% {
        top: -400px;
        left: -400px;
    }
    100% {
        top: 0;
        left: 0;
    }
}