21/06/2024, 23:16 75+ Mind-Blowing CSS Animation Examples (Free Code + Demos)

75+ Mind-Blowing CSS

Animation Examples (Free
Code + Demos)
Enjoy this 100% free and open source collection HTML and
CSS animation code examples. These CSS animations will
impress your visitors!

1. CSS Animations With SVGs

Author: Joyanna (joyanna)

Links: Source Code / Demo

Created on: May 8, 2020

Redesign the way you jam
Made with: HTML, SCSS with FigJam AI.

https://devsnap.me/css-animation-examples 1/36
21/06/2024, 23:16 75+ Mind-Blowing CSS Animation Examples (Free Code + Demos)

Author: Hisami Kurita (hisamikurita)

Links: Source Code / Demo

Created on: September 22, 2019

Made with: HTML, CSS

Tags: cssanimation

3. Only Css Animation #01

Author: Hisami Kurita (hisamikurita)

Links: Source Code / Demo

Created on: September 7, 2019

Made with: HTML, CSS

Tags: cssanimation

4. Pure CSS "Eye"

Redesign the way you jam

Author: Julia Miocene (miocene) with FigJam AI.

Links: Source Code / Demo

https://devsnap.me/css-animation-examples 2/36
 Made with: HTML, PostCSS, JS
21/06/2024, 23:16 75+ Mind-Blowing CSS Animation Examples (Free Code + Demos)

5. Close The Blinds

Author: Chance Squires (chancesq)

Links: Source Code / Demo

Created on: May 13, 2020

Made with: HTML, CSS

6. Rock'N'Roll Half-Marathon Animation

I recreated and animated the design from my half-marathon t-shirt

(http://kylephx.com/h/las-vegas-half.jpg)

Author: Kyle (kaisle)

Links: Source Code / Demo

Created on: March 29, 2020

Made with: HTML, SCSS

Tags: svg-animation, vector-art, svg, animation, half-marathon

Redesign the way you jam
with FigJam AI.

https://devsnap.me/css-animation-examples 3/36
21/06/2024, 23:16 75+ Mind-Blowing CSS Animation Examples (Free Code + Demos)

Author: Stívali Serna (stivaliserna)

Links: Source Code / Demo

Created on: April 12, 2020

Made with: HTML, CSS

8. Evening Lanterns

Author: Braydon Coyer (braydoncoyer)

Links: Source Code / Demo

Created on: March 5, 2020

Made with: Pug, SCSS, TypeScript

CSS Pre-processor: SCSS

JS Pre-processor: TypeScript

HTML Pre-processor: Pug

Tags: lanterns, generative, mountains, hills, cpc-generative

9. Letter CSS Animation Redesign the way you jam

with FigJam AI.

https://devsnap.me/css-animation-examples 4/36
 Links: Source Code / Demo
21/06/2024, 23:16 75+ Mind-Blowing CSS Animation Examples (Free Code + Demos)

Created on: March 12, 2020

Made with: HTML, Sass

10. 2020 SVG Animation | Using PathLength=1

With Stroke-dashoffset Tutorial

Author: @keyframers (keyframers)

Links: Source Code / Demo, Dribble Design, Youtube Tutorial, Cdpn.io,

Developer.mozilla.org, Css-tricks.com

Created on: January 6, 2020

Made with: HTML, SCSS, JS

Tags: keyframers, animation, svg, path, stroke

11. The Three-Body Problem

Inspired by Liu Cixin's sci-fi novel The Three-Body Problem I built this
pen
Redesign the way you jam

Author: Vian Esterhuizen (heyvian) with FigJam AI.

Links: Source Code / Demo

https://devsnap.me/css-animation-examples 5/36
 Made with: HTML, SCSS
21/06/2024, 23:16 75+ Mind-Blowing CSS Animation Examples (Free Code + Demos)

Tags: cssonly, cssanimation, animation, css

12. Only Css 3D Cube

Author: Hisami Kurita (hisamikurita)

Links: Source Code / Demo

Created on: December 20, 2019

Made with: HTML, SCSS

Tags: cssanimation

13. CSS Block Revealing Effect

Author: Abubaker Saeed (AbubakerSaeed)

Links: Source Code / Demo

Created on: December 23, 2019

Made with: HTML, CSS, JS

Tags: css, block-revealing, effect, animation Redesign the way you jam
with FigJam AI.

https://devsnap.me/css-animation-examples 6/36
21/06/2024, 23:16 75+ Mind-Blowing CSS Animation Examples (Free Code + Demos)

Author: Yusuke Nakaya (YusukeNakaya)

Links: Source Code / Demo

Created on: October 25, 2019

Made with: Pug, SCSS

CSS Pre-processor: SCSS

JS Pre-processor: None

HTML Pre-processor: Pug

15. CSS Typewriter 📄

Author: Aaron Iker (aaroniker)

Links: Source Code / Demo, Dribbble Shot

Created on: November 12, 2019

Made with: HTML, SCSS

Tags: typewriter, typing, loader, loading, animation

16. Only Css Animation Redesign the way you jam

with FigJam AI.

https://devsnap.me/css-animation-examples 7/36
 Links: Source Code / Demo
21/06/2024, 23:16 75+ Mind-Blowing CSS Animation Examples (Free Code + Demos)

Created on: September 22, 2019

Made with: HTML, CSS

Tags: cssanimation

17. Animation With Offset Motion Blur

Author: Lasse Diercks (lassediercks)

Links: Source Code / Demo

Created on: October 17, 2019

Made with: HTML, SCSS

18. ➰📃 Paper Pirouette | 3D CSS-only Flying

Page Animation Tutorial

David Khourshid and Stephen Shaw recreate a beautiful 3D isometric

flying paper animation using CSS only! ⏰ Streamed live on
September 16, 2019 at https://twitch.tv/keyframers 💡 Inspiration:
https://dribbble.com/shots/7127901-Dialog/attachments/131339 📺
Redesign the way you jam
with FigJam AI.
Video: https://youtu.be/Fdq95qVG...
Read More

https://devsnap.me/css-animation-examples 8/36
 Links: Source Code / Demo, Youtube Video
21/06/2024, 23:16 75+ Mind-Blowing CSS Animation Examples (Free Code + Demos)

Created on: September 16, 2019

Made with: HTML, SCSS

Tags: keyframers, 3d, paper, animation, isometric

19. The Perpetual Mobile. (Elastic Bounce)

The rotation movement is not directly related to the movement, so

there are no obvious repetitions and the animation is more attractive.

Author: Jomohop (jomohop)

Links: Source Code / Demo

Created on: August 17, 2019

Made with: HTML, CSS

20. Product Page | CSS Keyframes Animation

Author: Kaio Almeida (KaioRocha)

Links: Source Code / Demo Redesign the way you jam

with FigJam AI.
Created on: July 2, 2019

Made with: HTML, SCSS

https://devsnap.me/css-animation-examples 9/36
 21. Circle Becomming Square
21/06/2024, 23:16 75+ Mind-Blowing CSS Animation Examples (Free Code + Demos)

Author: Hayakawa (hayamine01)

Links: Source Code / Demo

Created on: September 3, 2019

Made with: HTML, CSS

22. Sticker

Author: ycw (ycw)

Links: Source Code / Demo

Created on: February 5, 2019

Made with: Pug, Less

CSS Pre-processor: Less

JS Pre-processor: None

HTML Pre-processor: Pug

Tags: codepenchallenge, img.fx

Redesign the way you jam

with FigJam AI.

23. UI Elements - SVG Animation

https://devsnap.me/css-animation-examples 10/36
 Links: Source Code / Demo
21/06/2024, 23:16 75+ Mind-Blowing CSS Animation Examples (Free Code + Demos)

Created on: October 31, 2016

Made with: HTML, CSS, JS

Tags: svg, animation, ui, gsap, tweenmax

24. Fake Variable Font With Css

Author: Miguel (ruidovisual)

Links: Source Code / Demo

Created on: June 4, 2019

Made with: Haml, Sass

CSS Pre-processor: Sass

JS Pre-processor: None

HTML Pre-processor: Haml

25. H2O - Chemical Flask (Animation)

CodePen Challenge - water. SVG chemical flask isRedesign

slightly animated
the way you jam
with FigJam AI.
with CSS.

Author: Ekaterina Vasilyeva (ekaterina_vasilyeva)

https://devsnap.me/css-animation-examples 11/36
 Created on: December 13, 2018
21/06/2024, 23:16 75+ Mind-Blowing CSS Animation Examples (Free Code + Demos)

Made with: HTML, CSS

Tags: cpc-water, codepenchallenge, chemical flask, css-animation, svg

26. ROCK 🎸

Author: Vangel Tzo (srekoble)

Links: Source Code / Demo, Dribbble Shot

Created on: December 16, 2018

Made with: HTML, SCSS, JS

Tags: rock, hand, animation, bone

27. Submarine Animation (Pure CSS)

Author: Akhil Sai Ram (akhil_001)

Links: Source Code / Demo, Dribbble Shot

Created on: November 11, 2018

Made with: HTML, SCSS, JS Redesign the way you jam

with FigJam AI.

Tags: pure-css, searching, animation, dribbble, codevember

https://devsnap.me/css-animation-examples 12/36
21/06/2024, 23:16 75+ Mind-Blowing CSS Animation Examples (Free Code + Demos)

Original artwork by Sailesh Gunasekaran on dribbble

Author: Tony Banik (banik)

Links: Source Code / Demo

Created on: September 7, 2018

Made with: Slim, SCSS, JS

CSS Pre-processor: SCSS

JS Pre-processor: None

HTML Pre-processor: Slim

Tags: css, sass, cassette, dribbble, retro

29. CSS Box Dog

I did my best at recreating this awesome animation by Tony Babel

with CSS only. Original: https://dribbble.com/shots/4934623-Box-
Doggie Also this pen by David Khourshid
https://codepen.io/davidkpiano/pen/Xempjq helped me figure out the
tail animation

Author: agathaco (agathaco)

Redesign the way you jam
Links: Source Code / Demo, Dribbble Shot, Codepen.io
with FigJam AI.

Created on: August 19, 2018

https://devsnap.me/css-animation-examples 13/36
 CSS Pre-processor: SCSS
21/06/2024, 23:16 75+ Mind-Blowing CSS Animation Examples (Free Code + Demos)

JS Pre-processor: Babel

HTML Pre-processor: Pug

Tags: css, pure-css, animation, dribbble

30. Whale And The Moon

Inktober Day 12 Prompt: Whale Not everyday you see a whale, do

you?

Author: Aswin Behera (aswinbehera)

Links: Source Code / Demo

Created on: October 13, 2018

Made with: HTML, CSS

31. Candles (Pure CSS Animation)

Recreated the dribbble shot by Gal shir. in complete CSS Animations.

Here is the link https://dribbble.com/shots/2516854-Candles .
Redesign the way you jam
with FigJam AI.
Author: Akhil Sai Ram (akhil_001)

Links: Source Code / Demo, Dribbble Shot

https://devsnap.me/css-animation-examples 14/36
 Made with: HTML, SCSS
21/06/2024, 23:16 75+ Mind-Blowing CSS Animation Examples (Free Code + Demos)

Tags: pure-css, animation, candles, dribbble, codevember

32. Coffee Machine Pure CSS Animation

Author: Henrique Rodrigues (hjdesigner)

Links: Source Code / Demo

Created on: August 31, 2018

Made with: HTML, CSS

33. Solar Eclipse

Conceptualized from our company blitz

Author: Aris Acoba (aris_acoba)

Links: Source Code / Demo

Created on: August 30, 2018

Made with: Pug, SCSS

Redesign the way you jam
CSS Pre-processor: SCSS with FigJam AI.

JS Pre-processor: None

https://devsnap.me/css-animation-examples 15/36
 Tags: solar, eclipse, gradients
21/06/2024, 23:16 75+ Mind-Blowing CSS Animation Examples (Free Code + Demos)

34. CSS Lighthouse Scene

Author: agathaco (agathaco)

Links: Source Code / Demo, Tutorial

Created on: August 26, 2018

Made with: Pug, SCSS, Babel

CSS Pre-processor: SCSS

JS Pre-processor: Babel

HTML Pre-processor: Pug

Tags: cssanimations, css, cssimages, purecss

35. Bits & Bytes | CSS Animation

Had fun bringing to life this illustration. Originally created for

https://raygun.com/

Author: Ollie (Olwiba) Redesign the way you jam

with FigJam AI.
Links: Source Code / Demo

Created on: August 28, 2018

https://devsnap.me/css-animation-examples 16/36
 Tags: keyframes, animation, transform, css3, svg
21/06/2024, 23:16 75+ Mind-Blowing CSS Animation Examples (Free Code + Demos)

36. Pure CSS "Moustached Nanny"

Author: Julia Miocene (miocene)

Links: Source Code / Demo, Dribbble Shot

Created on: August 2, 2018

Made with: HTML, PostCSS, JS

37. Dot Menu Animations

Four different menu animations for menu button toggle between dots,
cross and back icon. Prefer Hamburgers? Go this way:
https://codepen.io/Zaku/details/ejLNJL/ Additional Source:
https://github.com/tamino-martinius/ui-snippets-menu-animations

Author: Tamino Martinius (Zaku)

Links: Source Code / Demo, Codepen.io, Github.com

Created on: August 8, 2018

Redesign the way you jam
Made with: HTML, PostCSS, TypeScript with FigJam AI.

Tags: manu, animation, svg, icon, dots

https://devsnap.me/css-animation-examples 17/36
 38. Books Hover Animation
21/06/2024, 23:16 75+ Mind-Blowing CSS Animation Examples (Free Code + Demos)

Author: Yancy Min (yancy)

Links: Source Code / Demo, Dribbble Shot

Created on: July 14, 2018

Made with: HTML, CSS

39. Magnifying Glass Scrolling Loop Animation

Author: Yancy Min (yancy)

Links: Source Code / Demo, Dribbble Shot

Created on: August 4, 2018

Made with: HTML, CSS

40. The Handbook Download Animation

Author: Yancy Min (yancy)

Redesign the way you jam
with FigJam AI.
Links: Source Code / Demo

Created on: July 28, 2018

https://devsnap.me/css-animation-examples 18/36
21/06/2024, 23:16 75+ Mind-Blowing CSS Animation Examples (Free Code + Demos)

41. Connected Animation

this might only work in chrome! Transitioning on calc is likely not legal

Author: sean_codes (sean_codes)

Links: Source Code / Demo

Created on: July 1, 2018

Made with: Pug, SCSS, JS

CSS Pre-processor: SCSS

JS Pre-processor: None

HTML Pre-processor: Pug

42. Windmill (Pug + SCSS) - Responsive +

Animated

So after a lot of requests... Here's again a lovely animated #Windmill

to blow your mind letting your imaginations flow... Literally. 😜 This
kinda reminds me of that "Floating Windmill" scene over the clouds in
Redesign the way you jam
"Feel Good Inc." music video by @gorillaz. Don't you think?
with FigJam AI. 🤔

Author: Ashish Bardhan (AshBardhan)

https://devsnap.me/css-animation-examples 19/36
 Created on: June 24, 2018
21/06/2024, 23:16 75+ Mind-Blowing CSS Animation Examples (Free Code + Demos)

Made with: Pug, SCSS, JS

CSS Pre-processor: SCSS

JS Pre-processor: None

HTML Pre-processor: Pug

Tags: windmill, animation, css, html, flat-design

43. CSS Mask Animation

Author: Shaw (shshaw)

Links: Source Code / Demo

Created on: May 18, 2018

Made with: HTML, SCSS

44. CSS Animation: Time Of Day

Author: Olivia Ng (oliviale)

Links: Source Code / Demo Redesign the way you jam

with FigJam AI.
Created on: April 23, 2018

Made with: Pug, SCSS, JS

https://devsnap.me/css-animation-examples 20/36
 JS Pre-processor: None
21/06/2024, 23:16 75+ Mind-Blowing CSS Animation Examples (Free Code + Demos)

HTML Pre-processor: Pug

Tags: svg, animations, day, sunset, night

45. Get Attention Animations

Sometimes you want to draw attention to an element on your page.

Some of these are subtle. Some of them are not.

Author: Jerry Jones (jeryj)

Links: Source Code / Demo

Created on: September 11, 2017

Made with: Haml, SCSS, Babel

CSS Pre-processor: SCSS

JS Pre-processor: Babel

HTML Pre-processor: Haml

Tags: animation, attention, button, indicators

46. CSS Animation: Indoors Or Outdoors?

Redesign the way you jam
with FigJam AI.

https://devsnap.me/css-animation-examples 21/36
 wondering if I could replicate
21/06/2024, 23:16 the CSS
75+ Mind-Blowing exact same
Animation effect
Examples with
(Free Code CSS. ... YES I
+ Demos)

CAN :D Icons: flaticon.com.

Author: Olivia Ng (oliviale)

Links: Source Code / Demo

Created on: April 21, 2018

Made with: Pug, SCSS, JS

CSS Pre-processor: SCSS

JS Pre-processor: None

HTML Pre-processor: Pug

Tags: animations, indoors, outdoors

47. CSS-only Border Animation

CSS-only border animation on hover. It needs a solid background in

order to work.

Author: Danny Joris (DannyJoris)

Links: Source Code / Demo

Created on: April 10, 2018

Made with: Pug, SCSS Redesign the way you jam

with FigJam AI.
CSS Pre-processor: SCSS

JS Pre-processor: None

https://devsnap.me/css-animation-examples 22/36
 Tags: css, css-only, border, animation, hover
21/06/2024, 23:16 75+ Mind-Blowing CSS Animation Examples (Free Code + Demos)

48. Pure CSS Saturn Hula Hooping

Author: Jamie Coulter (jcoulterdesign)

Links: Source Code / Demo, Dribbble.com

Created on: March 24, 2018

Made with: Haml, SCSS

CSS Pre-processor: SCSS

JS Pre-processor: Babel

HTML Pre-processor: Haml

Tags: pure-css, animation, space, illustration, cute

49. Pure CSS "Sponge"

Author: Julia Miocene (miocene)

Links: Source Code / Demo

Created on: July 30, 2017 Redesign the way you jam
with FigJam AI.
Made with: HTML, SCSS, JS

Tags: weeklycssimages

https://devsnap.me/css-animation-examples 23/36
 50. Perspective Grid W/Animation // CSS Grid
21/06/2024, 23:16 75+ Mind-Blowing CSS Animation Examples (Free Code + Demos)

I often see this type of skewed image design for apps and websites, as
well as graphic design portfolios. What if we animated that into an
image gallery? This gallery utilizes CSS Grid Layout and CSS3
perspective to create something a little unique.

Author: Brian Haferkamp (brianhaferkamp)

Links: Source Code / Demo

Created on: August 18, 2017

Made with: Pug, Sass, JS

CSS Pre-processor: Sass

JS Pre-processor: None

HTML Pre-processor: Pug

Tags: css-grid, perspective, gallery, grid, animation

51. CSS Reveal Animation Text And Image

An css animation that reveals the text and image with delay / direction

Author: Anthony Fessy (antho-fsy) Redesign the way you jam

with FigJam AI.
Links: Source Code / Demo

Created on: March 14, 2017

https://devsnap.me/css-animation-examples 24/36
 Tags: animation, css, reveal, animated, text
21/06/2024, 23:16 75+ Mind-Blowing CSS Animation Examples (Free Code + Demos)

52. Flat Design Amusement Park Svg By Lina

(animation Powered By CSS)

Here's an svg from my lovely Lina - her flat design amusement park
for debut dribbble shot, animated by me with power of pure css3,
made here at Zajno https://dribbble.com/shots/2747921-Flat-Vector-
Ferris-Wheel-Animation

Author: Volodymyr Hashenko (gxash)

Links: Source Code / Demo, Dribbble.com

Created on: May 23, 2016

Made with: HTML, CSS, JS

Tags: svg, css3, animation, flat-design

53. Animated Back Glow

Psuedo Element + Background Gradient Animation + Blur = Badass

Redesign the way you jam

Author: George Hastings (georgehastings) with FigJam AI.

Links: Source Code / Demo

https://devsnap.me/css-animation-examples 25/36
 Made with: HTML, SCSS
21/06/2024, 23:16 75+ Mind-Blowing CSS Animation Examples (Free Code + Demos)

54. Cool Layout With Complex Chainable

Animation

Author: Nikolay Talanov (suez)

Links: Source Code / Demo, Dribbble.com

Created on: July 10, 2016

Made with: HTML, SCSS, JS

Tags: layout, css-animation, transition, chaining

55. Card Swipe Animation Material Design

Card swipe animation based on this Dribbble:

https://dribbble.com/shots/1721120-Keynote-animation-recreation

Author: Zoë Bijl (Michiel)

Links: Source Code / Demo, Dribbble.com

Created on: September 11, 2014 Redesign the way you jam
with FigJam AI.
Made with: Haml, SCSS, JS

CSS Pre-processor: SCSS

https://devsnap.me/css-animation-examples 26/36
 HTML Pre-processor: Haml
21/06/2024, 23:16 75+ Mind-Blowing CSS Animation Examples (Free Code + Demos)

Tags: css, animation, card, swipe, material design

56. CSS & SVG Waves Animation

I wanted to animated waves for the background of a page. Initially I

tried a staggered loop animation in Javascript, but some mobile
devices struggled really bad. This CSS3 version is hardware
accelerated, simple, and is much more performant.

Author: Ted McDonald (tedmcdo)

Links: Source Code / Demo

Created on: July 29, 2015

Made with: HTML, SCSS

Tags: waves, svg, css, animation, cubic-bezier

57. CSS Animation Material Design

Author: Zoë Bijl (Michiel)

Redesign the way you jam
Links: Source Code / Demo, Dribbble.com with FigJam AI.

Created on: September 10, 2014

https://devsnap.me/css-animation-examples 27/36
 CSS Pre-processor: SCSS
21/06/2024, 23:16 75+ Mind-Blowing CSS Animation Examples (Free Code + Demos)

JS Pre-processor: None

HTML Pre-processor: Haml

Tags: css, animation, material design

58. Pure CSS Animated Bubbles

Animated Bubbles using nothing but HTML and CSS.

Author: Mark Bowley (Mark_Bowley)

Links: Source Code / Demo

Created on: April 21, 2014

Made with: HTML, CSS

Tags: html, css3, animation

59. Animated Shopping Cart Icons

Just experimenting with some SVG animations and interactivity for a

"Fake Fruit Shop". Chrome only for now. Redesign the way you jam
with FigJam AI.

Author: Joni Trythall (jonitrythall)

https://devsnap.me/css-animation-examples 28/36
 Created on: May 7, 2014
21/06/2024, 23:16 75+ Mind-Blowing CSS Animation Examples (Free Code + Demos)

Made with: HTML, CSS, JS

Tags: animation, svg, shopping, responsive, fruit

60. Signature Animation

Pure CSS, lightweight signature animation.

Author: Damian Drygiel (drygiel)

Links: Source Code / Demo

Created on: September 20, 2013

Made with: HTML, Less, JS

Tags: sign, signature, handwriting, quote, animation

61. Cloudy Spiral CSS Animation

Started building a loading indicator but ended up with this... thing.

Author: Hakim El Hattab (hakimel)

Redesign the way you jam
Links: Source Code / Demo with FigJam AI.

Created on: July 3, 2013

https://devsnap.me/css-animation-examples 29/36
 CSS Pre-processor: SCSS
21/06/2024, 23:16 75+ Mind-Blowing CSS Animation Examples (Free Code + Demos)

JS Pre-processor: None

HTML Pre-processor: Haml

Tags: css-animation, spiral, blur

62. CSS Flame Animation

An animated flame using only CSS3 animations and box-shadow.

Wanted to see if I could make fire with just CSS - flame on! :)

Author: Adrian Payne (dazulu)

Links: Source Code / Demo

Created on: October 5, 2013

Made with: HTML, CSS, JS

Tags: css3, animation, flame, fire

63. Animated - SVG Birds

Author: Steven Roberts (matchboxhero) Redesign the way you jam

with FigJam AI.
Links: Source Code / Demo

Created on: October 14, 2017

https://devsnap.me/css-animation-examples 30/36
21/06/2024, 23:16 75+ Mind-Blowing CSS Animation Examples (Free Code + Demos)

64. Animated - SVG Snow

Author: Steven Roberts (matchboxhero)

Links: Source Code / Demo

Created on: October 8, 2017

Made with: HTML, SCSS

65. Tricky CSS Hover

Experimenting in 3d, VR inspired card layout feat. skateboarding

theme

Author: Piotr Galor (pgalor)

Links: Source Code / Demo

Created on: July 19, 2018

Made with: HTML, CSS

Tags: card, animation, 3d, css, ui

Redesign the way you jam

with FigJam AI.

66. Info Cards Concept

https://devsnap.me/css-animation-examples 31/36
 Author: Yancy Min (yancy)
21/06/2024, 23:16 75+ Mind-Blowing CSS Animation Examples (Free Code + Demos)
Links: Source Code / Demo

Created on: October 7, 2018

Made with: HTML, SCSS

67. Pure CSS Card Animation

Author: Deniz Parlar (denizparlar)

Links: Source Code / Demo

Created on: April 13, 2017

Made with: HTML, CSS

68. Efeito - Button Shake

Desafio 30 dias CSS - dia 22

Author: Sthéffane Nunes (StheffaneNunes)

Links: Source Code / Demo

Created on: August 25, 2020 Redesign the way you jam
with FigJam AI.

Made with: HTML, CSS

Tags: 30diasdecss, animation, button, hover

https://devsnap.me/css-animation-examples 32/36
 69. Breadcrumb Animation
21/06/2024, 23:16 75+ Mind-Blowing CSS Animation Examples (Free Code + Demos)

This animation simulates breadcrumbs falling from top of the header

Author: Jeffry (Shino17)

Links: Source Code / Demo

Created on: August 25, 2020

Made with: HTML, CSS, JS

Tags: animation, breadcrumbs, javascriptanimation, cssanimation

70. Efeito - Loader Animado

Desafio 30 dias CSS - dia 16

Author: Sthéffane Nunes (StheffaneNunes)

Links: Source Code / Demo

Created on: August 24, 2020

Made with: HTML, CSS

Tags: 30diasdecss, preloader, perspectiva, animation

Redesign the way you jam

with FigJam AI.

71. Pure CSS Set Of Cards Animation

https://devsnap.me/css-animation-examples 33/36
 Hover the set of cards to trigger the unfolding animation
21/06/2024, 23:16 75+ Mind-Blowing CSS Animation Examples (Free Code + Demos)

Author: Johan Mouchet (johanmouchet)

Links: Source Code / Demo

Created on: May 27, 2016

Made with: HTML, SCSS

Tags: css, animation, cards

72. Image Animation

Author: nguyencaotai1969 (nguyencaotai1969)

Links: Source Code / Demo

Created on: August 23, 2020

Made with: HTML, CSS

Tags: imageanimation, animation, imageanimationbeautifull

73. Fancy Card Animation

An animation that activates when you hover over Redesign

a card!theDemo
way you by
jam
with FigJam AI.
Simon Codrington accompanying the article "Seven Creative UI Design
Ideas You Can Use In Your Next Website" for SitePoint.

https://devsnap.me/css-animation-examples 34/36
 Links: Source Code / Demo
21/06/2024, 23:16 75+ Mind-Blowing CSS Animation Examples (Free Code + Demos)

Created on: May 14, 2017

Made with: HTML, CSS

Tags: hover-animation, cards animation

74. Animated Info-cards

Clean and intuitive interface : showcasing extraneous details on hover.

Still need to make it responsive to make it look perfect for mobile
devices .

Author: Vinayak Mukherjee (Vinnn)

Links: Source Code / Demo

Created on: October 27, 2018

Made with: HTML, SCSS

More Awesome Lists:

Redesign the way you jam

CSS Animation CSS Motion Path
with FigJam AI.
Libraries Examples

https://devsnap.me/css-animation-examples 35/36
21/06/2024, 23:16 75+ Mind-Blowing CSS Animation Examples (Free Code + Demos)
CSS Border
CSS Fire Animation
Examples

Share:

Twitter Facebook

© Copyright 2020 Dev Snap Contact About Terms Privacy

Redesign the way you jam

with FigJam AI.

https://devsnap.me/css-animation-examples 36/36