CSS Animations Archives | Puneet Sharma

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

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

Simple CSS blinking cursor

CSS

Here is an example of simple CSS only blinking cursor that you can use and modify according to your needs. I have used keyframes to introduce infinite blinking animation to the cursor. See the Pen Simple CSS Blinking Cursor by Puneet Sharma (@webdevpuneet) on...

Eye SVG/CSS Animation

SVG Animation

You can apply the following css to your SVG to animate it. For eyes, you will need to measure transform-origin i.e. distance of the center of each eye from the top and leftmost part of the SVG. /* Keyframes */ @keyframes eyes { 0%{ transform: scale(1,1); } 27.5%{...

Pure CSS Gradient Background Animation

Misc

Here is a demo with CSS code for gradient background animation using CSS only. This animation can prove valuable in places like hero sections, cards, and hover states of buttons. This animation will make them look alive and attract user attention. You can create your...

Tag: CSS Animations

CSS technique for elastic moving active background for navigations

Content loading animation via CSS

Simple CSS blinking cursor

Eye SVG/CSS Animation

Pure CSS Gradient Background Animation