Blog
Select Page

Tag: CSS Animations

All posts related to CSS animations. Find more CSS tools here – https://tools.webdevpuneet.com/

How to create an SVG animation with CSS?

How to create an SVG animation with CSS?

Misc

Hey guys, I really needed to put this awesome video post by Dev Ed as he demonstrates step by step method to create an SVG animation with CSS. Here are the steps I noted: Step 1 – get your SVG image ready by editing it on Figma or any other SVG editor by...
Color Blinking – CSS Animation

Color Blinking – CSS Animation

Misc

Color Blinking – CSS Animation This is a simple example of how to create CSS animations. You can use any CSS property inside the {} curly braces to get desired effects. Demo Open demo in a full window –...
Flip and Click Cards using jQuery and CSS

Flip and Click Cards using jQuery and CSS

Misc

Flip and Click Cards Here is an HTML template with a demo for flip and click cards. I have used jQuery for the active state and worked on CSS to transform rotate the card. After rotation user can see the associated text can click on it to go to the associated URL....
Flip animation with two images on opposite sides

Flip animation with two images on opposite sides

Misc

/* Banner Image Flip */ @-webkit-keyframes move1 { 0% { transform: rotate3d(0, 1, 0, 0deg); opacity: 1; } 10% { transform: rotate3d(0, 1, 0, 90deg); opacity: 0; } 50% { transform: rotate3d(0, 1, 0, 90deg); opacity: 0; } 60% { transform: rotate3d(0, 1, 0, 0deg);...
Animate letters of a text using Blast.JS

Animate letters of a text using Blast.JS

Misc

Here I have used Blast.JS to encapsulate each letter of the text with <span> having a CSS property – ‘transition-delay’ value just a little later than the first letter and transformed it while clicking the animate button. You can play with this...