JSFiddle - React, Tailwind, and code Playground
HTML
<!-- <div class="box"><b></b></div> -->
<div class="wrapper"><img src="http://www.alessioatzeni.com/CSS3-Cycle-Image-Slider/images/img_1.jpg" alt="" /></div>
CSS
body { background: #222; }
.box {
background-color: #61ab20;
margin: 0 auto;
width: 400px;
height: 200px;
position: relative;
box-shadow: inset 0 0 3px #000;
border-radius: 5px;
border: 1px solid #111;
overflow: hidden;
}
.box b {
display: block;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #3673cf;
box-shadow: inset -5px -5px 5px rgba(0,0,0,.6), 15px 15px 2px rgba(0,0,0,.04);
position: absolute;
-webkit-animation: moveX 1.05s linear 0s infinite alternate, moveY 1.4s linear 0s infinite alternate;
-moz-animation: moveX 1.05s linear 0s infinite alternate, moveY 1.4s linear 0s infinite alternate;
-o-animation: moveX 1.05s linear 0s infinite alternate, moveY 1.4s linear 0s infinite alternate;
animation: moveX 1.05s linear 0s infinite alternate, moveY 1.4s linear 0s infinite alternate;
animation-play-state:running;
-webkit-animation-play-state:running;
}
.box:hover b{
animation-play-state:paused;
-webkit-animation-play-state:paused;
}
@-webkit-keyframes moveX {
from { left: 0; } to { left: 380px; }
}
@-moz-keyframes moveX {
from { left: 0; } to { left: 380px; }
}
@-o-keyframes moveX {
from { left: 0; } to { left: 380px; }
}
@keyframes moveX {
from { left: 0; } to { left: 380px; }
}
@-webkit-keyframes moveY {
from { top: 0; } to { top: 180px; }
}
@-moz-keyframes moveY {
from { top: 0; } to { top: 180px; }
}
@-o-keyframes moveY {
from { top: 0; } to { top: 180px; }
}
@keyframes moveY {
from { top: 0; } to { top: 180px; }
}
.wrapper {
background-color: #DDD;
margin: 0 auto;
width: 580px;
height: 260px;
position: relative;
overflow: hidden;
}
img {
display: block;
max-width: 100%;
max-height: 100%;
transform:scale(1.2);
position: absolute;
position: absolute;
-webkit-animation: moveBannerX 1.05s linear 0s infinite alternate, moveBannerY 1.4s linear 0s infinite alternate;
-moz-animation: moveBannerX 1.05s linear 0s infinite alternate, moveBannerY 1.4s linear 0s...