Css Slider Without JavaScript

Actually I'm a new learner with JavaScript and always being frustrated by the mingle code. I prefer no JavaScript which means easier and more readable, thankful to CSS3 skills of animation. I think Slider is the first step when you begin to learn JavaScript and the result looks fantanstic and attractive. Now I'm trying to bulid a image sliders without JavaScript. 

The result has been shown at the beginning. Here we go to the code part.

HTML part is contained three DOM layer such as the ID called slider(the outer frame),the slide-holder(the content stored all images) and the slide (each image is a slide). Here I got three images in the holder. The slider div is the eara which can be shown in the grey border.

CSS part is decorated the style. The holder width should be wide enough to contain all the images which is bigger than the total width of all images. The moving animation comes from the CSS3 which lasts 10s and works permanently. The keyframe called scroller is bulit by transform divided four step because of the three images here. The moving distance is the image with firstly and the image width*2 secondly  horizontally.  The 0%position and 100%position should be same for loop. 

The demo is usful when you prefer the code be simple and convenient.

The demo code can be downloaded here  download