Pure CSS3 Based Carousel

• 
• 
• 
• 

--------------------------------------------------------------------------------------------------
HTML:
--------------------------------------------------------------------------------------------------
<div class="carousel">
<ul class="panes">
<li class="panes-li">
<img src="http://www.jssor.com/demos/img/home/02.jpg" alt="">
</li>
<li class="panes-li">
<img src="http://wowslider.com/sliders/demo-5/data/images/sweden.jpg" alt="">
</li>
<li class="panes-li">
<img src="http://www.menucool.com/slider/prod/image-slider-5.jpg" alt="">
</li>
<li class="panes-li">
<img src="http://demo.smartaddons.com/extensions/joomla17/cache/mod_sj_content_slider/cc021ca251f443c4a934cba184872eff.jpeg" alt="">
</li>
</ul>
</div>


--------------------------------------------------------------------------------------------------
CSS:
--------------------------------------------------------------------------------------------------
.carousel{
    overflow:hidden;
    width:100%;
}
.panes{
display: table !important;
list-style:none;
    margin:0;
    padding:0;
    position:relative;
    width:400%; /* Number of panes * 100% */
    overflow:hidden; /* This is used solely to clear floats, it does not add functionality. */
     
    -moz-animation:carousel 20s linear infinite;
    -webkit-animation:carousel 20s linear infinite;
animation:carousel 20s linear infinite;
}
.panes:hover{
-moz-animation-play-state:paused;
-webkit-animation-play-state:paused;
animation-play-state:paused;
}
.panes-li{
display: table-cell !important;
    position:relative;
    float:left;
    width:25%; /* 100 / number of panes */
}
.carousel img{
    display:block;
    width:100%;
    max-width:100%;
}

@-moz-keyframes carousel{
    0%  { left:0; }
    23% { left:0; }
    25% { left:-100%; }
    48% { left:-100%; }
    50% { left:-200%; }
    73% { left:-200%; }
    75% { left:-300%; }
    98% { left:-300%; }
    100%  { left:0; }
}

@-webkit-keyframes carousel{
    0%  { left:0; }
    23% { left:0; }
    25% { left:-100%; }
    48% { left:-100%; }
    50% { left:-200%; }
    73% { left:-200%; }
    75% { left:-300%; }
    98% { left:-300%; }
    100%  { left:0; }
}

@keyframes carousel{
    0%  { left:0; }
    23% { left:0; }
    25% { left:-100%; }
    48% { left:-100%; }
    50% { left:-200%; }
    73% { left:-200%; }
    75% { left:-300%; }
    98% { left:-300%; }
    100%  { left:0; }

}

--------------------------------------------------------------------------------------------------
Fiddle:
--------------------------------------------------------------------------------------------------
https://jsfiddle.net/thisisdev4u/98ddhqof/