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 Made with: HTML, SCSS

2. Only Css Animation

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"

Author: Julia Miocene (miocene) Links: Source Code / Demo Created on: April 12, 2020 Made with: HTML, PostCSS, JS

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

7. Sausage Dog CSS Only Animation

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

Author: Miguel (ruidovisual) Links: Source Code / Demo Created on: March 12, 2020 Made with: HTML, Sass

10. 2020 SVG Animation | Using PathLength=1 With Stroke-dashoffset Tutorial

Author: @keyframers (keyframers) 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 Author: Vian Esterhuizen (heyvian) Links: Source Code / Demo Created on: January 9, 2020 Made with: HTML, SCSS 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

14. Only CSS: Motion Blur

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

Author: Hisami Kurita (hisamikurita) Links: Source Code / Demo 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 📺 Video: https://youtu.be/Fdq95qVG.

Author: @keyframers (keyframers) Links: Source Code / Demo , Youtube Video 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 Created on: July 2, 2019 Made with: HTML, SCSS

21. Circle Becomming Square

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

23. UI Elements - SVG Animation

Author: Jean Paze (jeanpaze) Links: Source Code / Demo 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 is slightly animated with CSS. Author: Ekaterina Vasilyeva (ekaterina_vasilyeva) Links: Source Code / Demo Created on: December 13, 2018 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 Tags: pure-css, searching, animation, dribbble, codevember

28. CSS Cassette

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) Links: Source Code / Demo , Dribbble Shot , Codepen.io Created on: August 19, 2018 Made with: Pug, SCSS, Babel CSS Pre-processor: SCSS 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 .

Author: Akhil Sai Ram (akhil_001) Links: Source Code / Demo , Dribbble Shot Created on: November 1, 2018 Made with: HTML, SCSS 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 CSS Pre-processor: SCSS JS Pre-processor: None HTML Pre-processor: Pug Tags: solar, eclipse, gradients

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) Links: Source Code / Demo Created on: August 28, 2018 Made with: HTML, SCSS, JS Tags: keyframes, animation, transform, css3, svg

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 Made with: HTML, PostCSS, TypeScript Tags: manu, animation, svg, icon, dots

38. Books Hover Animation

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) Links: Source Code / Demo Created on: July 28, 2018 Made with: HTML, CSS

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 "Feel Good Inc." music video by @gorillaz. Don't you think? 🤔

Author: Ashish Bardhan (AshBardhan) Links: Source Code / Demo , Dribbble Shot Created on: June 24, 2018 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 Created on: April 23, 2018 Made with: Pug, SCSS, JS CSS Pre-processor: SCSS JS Pre-processor: None 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?

Recently was involved in a project where we had to do animations. We used After Effects > JSON > some plugin magic for it but I was wondering if I could replicate the exact same effect with CSS. . YES I 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 CSS Pre-processor: SCSS JS Pre-processor: None HTML Pre-processor: Pug Tags: css, css-only, border, animation, hover

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 Made with: HTML, SCSS, JS Tags: weeklycssimages

50. Perspective Grid W/Animation // CSS Grid

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.