Category: CSS Animations

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

How to Use SVG, CSS & GSAP Animations to Enhance User Experience

CSS Animations, Pinned, SVG Animation

Animations can turn a static website into an engaging, modern experience — but only when used correctly. In this guide, I’ll show how I use SVG, CSS, and GSAP animations to improve user experience without hurting performance. Why Animations Matter Good animations:...

Gradient loader animation with html and css only

Code Snippets, CSS, CSS Animations

Here is a very simple example with a demo and source code for making a cool loader animation with a gradient. See the Pen loading-animation-gradient by Puneet Sharma (@webdevpuneet) on CodePen.

Matrix rain drop 01 digit code

Code Snippets, CSS Animations, JavaScript

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

CSS Animations, JavaScript

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

Code Snippets, CSS, CSS Animations

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

CSS Animations

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...

« Older Entries