backspace

You may use the CSS3 transitions we discussed in our previous post to implement slider by having the slides besides each other using float:left then change the left position of their container, the div containing the slides have sufficient width to make the slides lies beside each other and the div that contains it got overflow:hidden and that's the trick, as we can change left to show the slide we want. See the live demo for the most simple slider with CSS3 transitions We have used onmouseover/onmouseout to set a flag that disable the slider while the mouse is inside the box so that user won't get disturbed by the slider movement when he want interact with the active slide content (eg. trying to click the link in first slide). You may use jQuery or ZeptoJS or any JS framework to generalize the code and you may put onclick on the buttons to make it move to some slide (onlclick=" slide_cur=X; ").

Some people might use setTimeout to do animations in Javascript, and many people use jQuery just to do some simple animation (fade, expand, ...etc). In this post I'm going to show how you can achieve this without any JS at all, just a simple CSS3 transitions. Just add the " .ani " class to your " div " and it will be animated where " ani " is defined below .ani { -moz-transition: all 0.75s ease; -webkit-transition: all 0.75s ease; -ms-transition: all 0.75s ease; -o-transition: all 0.75s ease; transition: all 0.75s ease; } Almost any thing you do to divs carrying this class will be animated. You can replace 0.75 seconds with any duration you want for the animation to last. Flow the link below to see a live demo Live demo for CSS3 based animation Try to click links in the bottom left box, also try to change the class of the green box from "ani box1" to "ani box2" by doing right click then choose "inspect element...