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

.wrapper{
 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%;}
}
.rotating-image{
 width: 30%;
 height: 100px;
 border-radius: 5px;
 float: left;
 margin: 10px;
 background-position: cover;
}
#advert1{
 background: url(http://192.185.117.219/~advice/wp-content/uploads/2014/12/medium_DSCF1619.jpg)
}
#advert2{
 background: url(http://192.185.117.219/~advice/wp-content/uploads/2014/12/walnut-tree-worlington.jpg)
}
#advert3{
 background: url(http://192.185.117.219/~advice/wp-content/uploads/2014/12/bird1.jpg)
}
<body>
<div class="wrapper">
 <div class="rotating-image" id="advert1"></div>
 <div class="rotating-image" id="advert2"></div>
 <div class="rotating-image" id="advert3"></div>
</div>
</body>

The related pen code is in this link

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s