Pure CSS3 Content Slider
The progress bar, moving slides and the container shaking on every slide, all of these effects are achieved with animations. For the progress bars, the width increases along several keyframes. Images slides left by setting large negative left offsets along with opacity changes for a nice transition. Shaking of the entire slider on every slide is done with the rotate() transform function in several keyframes. If you have fair amount of knowledge about animations, transforms and transitions, then there's nothing too complex in the experiment.
On mouse hover, the animation pauses due to the usage of
Following are some of the major drawbacks of the slider (or CSS sliders in general), as mentioned by the author -
- Cross Browser Support: In the current state, CSS3 Animations are only supported by Webkit browsers (Chrome, Safari) and Firefox. Opera and Internet Explorer do not support them which does still have significant market share.
- Manipulating Slides Count isn't Easy: The slider must contain exactly 4 slides, not less, not more. Altering the number of slides will need alteration in the CSS Animation code too.
- No Practical Way for Navigation: There isn't any proper way to add slider controls that can be used in a real world scenario. You may use the
:targetpseudo class or
input[type="radio"] + label, but neither of them are proper solutions IMHO.
Read more information about it at the experiment's website.