CSS3-based animation instead of jQuery

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

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"


Popular posts from this blog

DIY Docker using Skopeo+OStree+Runc

Multi-host docker cluster using OVS/VxLAN on CentOS 7

Bootstrapping Alpine Linux QCow2 image