JSFiddle - React, Tailwind, and code Playground
HTML
<div class="circle">
</div>
CSS
.circle {
position: absolute;
border-radius: 50%;
width: 220px;
height: 220px;
overflow: hidden;
background: url("http://zverushka.bl.ee/circle-bg.jpg") -23px -13px fixed;
-webkit-animation: circle-move 7s infinite linear;
-o-animation: circle-move 7s infinite linear;
-moz-animation: circle-move 7s infinite linear;
-ms-animation: circle-move 7s infinite linear;
animation: circle-move 7s infinite linear;
}
@-webkit-keyframes circle-move {
0% {
background-position: -23px -13px;
}
50% {
background-position: -23px -33px;
}
}
@-o-keyframes circle-move {
0% {
background-position: -23px -13px;
}
50% {
background-position: -23px -33px;
}
}
@-moz-keyframes circle-move {
0% {
background-position: -23px -13px;
}
50% {
background-position: -23px -33px;
}
}
@keyframes circle-move {
0% {
background-position: -23px -13px;
}
50% {
background-position: -23px -33px;
}
}