
Category: CSS Animations
CSS animations are a proposed module for Cascading Style Sheets that allows the animation of HTML document elements using CSS.


Matrix rain drop 01 digit code
Here is a code with a demo for matrix raindrop-like animation from top to bottom with 0 and 1 as its digits. DEMO See the Pen Untitled by Puneet Sharma (@webdevpuneet) on CodePen. HTML <canvas class=”canvas”> Code // Initialising the canvas var canvas =...Animating Blocks
Here is a cool example of animating blocks with no adjacent blocks active. See the Pen Animating Blocks by Puneet Sharma (@webdevpuneet) on CodePen.CSS technique for elastic moving active background for navigations
Here is a simple CSS solution (javascript not needed here) to achieve the active state elastic animations that go from left to right during the active state of a particular nav tab. Let “.bg-elastic” is the free-moving active state element inside the nav...
Content loading animation via CSS
Here is a simple content-loading animation I created in one of my freelance projects that looks similar to the other content-loading animations you might have seen on other websites like Facebook. The logic is to animate the background gradient from left to right in...