Creating Revolving /Sliding images only CSS/HTML no jQuery/js

 width: 100%;
 position: absolute;
 -webkit-animation: mymove 20s infinite;
 -moz-animation: mymove 20s infinite;
 animation: mymove 20s infinite;
 overflow: hidden;
 display: table;
 background-color: yellow;
@-webkit-keyframes mymove {
 0% {left: 0%;}
 25% {left: -100%;}
 75% {left: 100%;}
 100% {left: 0%;}
 width: 30%;
 height: 100px;
 border-radius: 5px;
 float: left;
 margin: 10px;
 background-position: cover;
 background: url(
 background: url(
 background: url(
<div class="wrapper">
 <div class="rotating-image" id="advert1"></div>
 <div class="rotating-image" id="advert2"></div>
 <div class="rotating-image" id="advert3"></div>

The related pen code is in this link

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s