Mover “Clip-Path(css3)” e deixar foto de fundo estática

Front-end
, ,
#1

Existe uma foto atrás desse fundo preto. Queria que, ao movimentar-se este circulo, a foto ficasse estática e somente o periscópio(circulo) percorresse a imagem. Abaixo há um código do que consegui fazer:

img: 

<!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    	<title></title>
    	<link rel="stylesheet" href="">
    	<style>
    		body {
    		  background: #000;
    		  width: 100vw;
    		  height: 100vh;
    		  padding: 0;
    		  margin: 0;
    		}

    		.frame {
    		  background-image: url(https://hacks.mozilla.org/files/2017/06/benko-game.png);
    		  background-repeat: repeat-x;
    		  background-position: left center;
    		  width: 100%;
    		  height: 100%;		  
    		  clip-path: circle(80px);
    		}

    		@keyframes myfirst {
    		    0%   {left: 0px; top: 0px;}
    		    25%  {left: 200px; top: 0px;}
    		    50%  {left: 200px; top: 200px;}
    		    75%  {left: 0px; top: 200px;}
    		    100% {left: 0px; top: 0px;}
    		}

    		div {
    		    position: relative;
    		    animation: myfirst 5s infinite;
    		    animation-direction: alternate;
    		}
    	</style>
    </head>
    <body>
    	
    	<div class="frame"></div>

    </body>
    </html>