JSFiddle - React, Tailwind, and code Playground
HTML
<div class="circle">
<div></div>
</div>
CSS
.circle {
position: absolute;
border-radius: 50%;
width: 220px;
height: 220px;
overflow: hidden;
}
.circle div {
background: url("http://zverushka.bl.ee/circle-bg.jpg");
width: 331px;
height: 264px;
position: absolute;
top: -23px;
left: -23px;
-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% {
top: -23px;
}
25% {
top: -33px;
}
75% {
top: -13px;
}
100% {
top: -23px;
}
}
@-o-keyframes circle-move {
0% {
top: -23px;
}
25% {
top: -33px;
}
75% {
top: -13px;
}
100% {
top: -23px;
}
}
@-moz-keyframes circle-move {
0% {
top: -23px;
}
25% {
top: -33px;
}
75% {
top: -13px;
}
100% {
top: -23px;
}
}
@keyframes circle-move {
0% {
top: -23px;
}
25% {
top: -33px;
}
75% {
top: -13px;
}
100% {
top: -23px;
}
}