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% {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
25% {
-webkit-transform: translateY(-10px);
-moz-transform: translateY(-10px);
-ms-transform: translateY(-10px);
-o-transform: translateY(-10px);
transform: translateY(-10px);
}
75% {
-webkit-transform: translateY(10px);
-moz-transform: translateY(10px);
-ms-transform: translateY(10px);
-o-transform: translateY(10px);
transform: translateY(10px);
}
100% {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
}
@-o-keyframes circle-move {
0% {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
25% {
-webkit-transform: translateY(-10px);
-moz-transform: translateY(-10px);
-ms-transform: translateY(-10px);
-o-transform: translateY(-10px);
transform: translateY(-10px);
}
75% {
-webkit-transform: translateY(10px);
-moz-transform: translateY(10px);
-ms-transform: translateY(10px);
-o-transform: translateY(10px);
transform: translateY(10px);
}
...