If you are looking for the latest collection of 80+ CSS animations to add movement, transitions, and effects to your web project and convey information through visual means, look no further!
In this comprehensive compilation, we are featuring the collections of free HTML and CSS animation code examples that we have gathered from authentic platforms like GitHub, CodePen, and many more.
CSS animations are visually engaging effects mainly used to add smooth movement, visually stunning transitions, and aesthetically pleasing visual effects to user interface elements in a web page using CSS and sometimes a little bit of JavaScript.
We’ve carefully selected each CSS animation example to ensure balance and harmony in your project in terms of UI/UX design. Whether you’re an expert frontend developer or a beginner UI designer or developer, our wide array of curated CSS animation collection has something for everyone, providing guidance on how to build interactive systems or digital products.
With the basic knowledge of CSS 3 animations, you can change properties such as position, size, colour, rotation, and opacity for a specified period of time without the use of external scripting languages, making the website look more attractive and interactive, which captivates the attention of site visitors.
Feel free to explore our hand-picked, easy-to-customize CSS animation examples, designed to enhance user satisfaction and evoke happiness or contentment in your web projects.
01. Pure CSS “Sponge”
See the Pen
Pure CSS “Sponge” by Julia Miocene (@miocene)
on CodePen.
Author: Julia Miocene @miocene
Links: Source Code / Demo
Created on: July 30, 2017
Made with: HTML, CSS, JS
02. Dot Menu Animations
See the Pen
Dot Menu Animations by Tamino Martinius (@Zaku)
on CodePen.
Author: Tamino Martinius @Zaku
Links: Source Code / Demo
Created on: August 8, 2018
Made with: HTML, CSS(PostCSS), JS(TypeScript)
03. Flat Design Amusement Park Svg By Lina (animation Powered By CSS)
See the Pen
Flat design amusement park svg by Lina (animation powered by CSS) by Volodymyr Hashenko (@gxash)
on CodePen.
Author: Volodymyr Hashenko @gxash
Links: Source Code / Demo
Created on: May 23, 2016
Made with: HTML, CSS, JS
04. Animated Shopping Cart Icons
See the Pen
Animated Shopping Cart Icons by Joni Trythall (@jonitrythall)
on CodePen.
Author: Joni Trythall @jonitrythall
Links: Source Code / Demo
Created on: May 08, 2014
Made with: HTML, CSS, JS
05. CSS & SVG Waves Animation
See the Pen
CSS & SVG Waves Animation by Ted McDonald (@tedmcdo)
on CodePen.
Author: Ted McDonald @tedmcdo
Links: Source Code / Demo
Created on: July 29, 2015
Made with: HTML, CSS, SCSS
06. Solar Eclipse
See the Pen
solar eclipse by Aris Acoba (@aris_acoba)
on CodePen.
Author: Aris Acoba @aris_acoba
Links: Source Code / Demo
Created on: August 30, 2018
Made with: HTML(Pug), CSS(SCSS)
07. Pure CSS Saturn Hula Hooping
See the Pen
Pure CSS Saturn Hula Hooping by Jamie Coulter (@jcoulterdesign)
on CodePen.
Author: Jamie Coulter @jcoulterdesign
Links: Source Code / Demo
Created on: March 24, 2018
Made with: HTML(Haml), CSS, SCSS
08. Parallax Scroll Animation
See the Pen
Parallax scroll animation by isladjan (@isladjan)
on CodePen.
Author: isladjan @isladjan
Links: Source Code / Demo
Created on: June 28, 2020
Made with: HTML, CSS, JS
09. Bits & Bytes | CSS Animation
See the Pen
Bits & Bytes | CSS Animation by Ollie (@Olwiba)
on CodePen.
Author: Ollie @Olwiba
Links: Source Code / Demo
Created on: August 28, 2018
Made with: HTML, CSS(SCSS), JS
10. Floating Animation- CSS
See the Pen
Floating Animation – CSS by Mario Duarte (@MarioDesigns)
on CodePen.
Author: Mario Duarte @MarioDesigns
Links: Source Code / Demo
Created on: November 21, 2016
Made with: HTML, CSS, SCSS
11. Books Hover Animation
See the Pen
Books Hover Animation by Yancy Min (@yancy)
on CodePen.
Author: Yancy Min @yancy
Links: Source Code / Demo
Created on: July 15, 2018
Made with: HTML, CSS
12. CSS Animation Material Design
See the Pen
CSS Animation Material Design by Zoë Bijl (@Moiety)
on CodePen.
Author: Zoë Bijl @Moiety
Links: Source Code / Demo
Created on: September 11, 2014
Made with: HTML(Haml), CSS(SCSS)
13. CSS Lighthouse Scene
See the Pen
CSS Lighthouse Scene by agathaco (@agathaco)
on CodePen.
Author: agathaco @agathaco
Links: Source Code / Demo
Created on: August 26, 2018
Made with: HTML(Pug), CSS(SCSS), JS(Babel)
14. CSS Animation
See the Pen
CSS Animation by Venerons (@Venerons)
on CodePen.
Author: Venerons @Venerons
Links: Source Code / Demo
Created on: May 21, 2014
Made with: HTML(Pug), CSS
15. Pure CSS “Moustached Nanny”
See the Pen
Pure CSS “Moustached Nanny” by Julia Miocene (@miocene)
on CodePen.
16. Pelican CSS
See the Pen
Pelican CSS by coder787 (@coder787)
on CodePen.
Author: coder787 @coder787
Links: Source Code / Demo
Created on: May 05, 2021
Made with: HTML, CSS
17. Signature Animation
See the Pen
Signature animation by Damian Drygiel (@drygiel)
on CodePen.
Author: Damian Drygiel @drygiel
Links: Source Code / Demo
Created on: September 21, 2013
Made with: HTML, CSS(Less), JS
18. 3D CSS-only Flying Page Animation Tutorial
See the Pen
➰???? Paper Pirouette | 3D CSS-only flying page animation tutorial | @keyframers 2.18.0 by @keyframers (@keyframers)
on CodePen.
Author: @keyframers @keyframers
Links: Source Code / Demo
Created on: September 16, 2019
Made with: HTML, CSS, SCSS
19. Magnifying Glass Scrolling Loop Animation
See the Pen
Magnifying glass scrolling loop animation by Yancy Min (@yancy)
on CodePen.
Author: Yancy Min @yancy
Links: Source Code / Demo
Created on: August 4, 2018
Made with: HTML, CSS
20. Pure CSS Animated Bubbles
See the Pen
Pure CSS Animated Bubbles by Mark Bowley (@Mark_Bowley)
on CodePen.
Author: Mark Bowley @Mark_Bowley
Links: Source Code / Demo
Created on: April 22, 2014
Made with: HTML, CSS
21. Animation With Offset Motion Blur
See the Pen
Animation with offset motion blur by Lasse Diercks (@lassediercks)
on CodePen.
Author: Lasse Diercks @lassediercks
Links: Source Code / Demo
Created on: October 17, 2019
Made with: HTML, CSS, SCSS
22.CSS-only Border Animation
See the Pen
CSS-only border animation by Danny Joris (@DannyJoris)
on CodePen.
Author: Danny Joris @DannyJoris
Links: Source Code / Demo
Created on: April 10, 2018
Made with: HTML(Pug), CSS(SCSS)
23. Walking Cat
See the Pen
walking cat by Eva (@SoyEva)
on CodePen.
Author: Eva @SoyEva
Links: Source Code / Demo
Created on: September 29, 2016
Made with: HTML, CSS
24. Whale And The Moon
See the Pen
Whale and the Moon by Aswin Behera (@aswinbehera)
on CodePen.
Author: Aswin Behera @aswinbehera
Links: Source Code / Demo
Created on: October 13, 2018
Made with: HTML, CSS
25. Cloudy Spiral CSS Animation
See the Pen
Cloudy Spiral CSS animation by Hakim El Hattab (@hakimel)
on CodePen.
Author: Hakim El Hattab @hakimel
Links: Source Code / Demo
Created on: July 04, 2013
Made with: HTML(haml), CSS(Scss), JS
26. Only Css Animation
See the Pen
Only Css Animation #03 by Hisami Kurita (@hisamikurita)
on CodePen.
Author: Hisami Kurita @hisamikurita
Links: Source Code / Demo
Created on: September 22, 2019
Made with: HTML, CSS
27. Animated Back Glow
See the Pen
Animated Back Glow by George Hastings (@georgehastings)
on CodePen.
Author: George Hastings @georgehastings
Links: Source Code / Demo
Created on: January 8, 2017
Made with: HTML, CSS, SCSS
28. Nosferatu – Pure CSS Animation
See the Pen
Nosferatu – Pure CSS Animation by Josetxu (@josetxu)
on CodePen.
Author: Josetxu @josetxu
Links: Source Code / Demo
Created on: October 13, 2022
Made with: HTML, CSS
29. CSS Typewriter
See the Pen
CSS Typewriter ???? by Aaron Iker (@aaroniker)
on CodePen.
Author: Aaron Iker @aaroniker
Links: Source Code / Demo
Created on: November 12, 2019
Made with: HTML, CSS, SCSS
30. The Handbook Download Animation
See the Pen
The handbook download animation by Yancy Min (@yancy)
on CodePen.
Author: Yancy Min @yancy
Links: Source Code / Demo
Created on: July 28, 2018
Made with: HTML, CSS
31. Cloud Pirate Animation
See the Pen
Cloud Pirate by Joshua Wootonn (@joshuawootonn)
on CodePen.
Author: Joshua Wootonn @joshuawootonn
Links: Source Code / Demo
Created on: November 22, 2020
Made with: HTML, CSS(SCSS), JS(TypeScript)
32. CSS Box Dog (Tony Babel)
See the Pen
CSS Box Dog (Tony Babel) by agathaco (@agathaco)
on CodePen.
Author: agathaco @agathaco
Links: Source Code / Demo
Created on: August 19, 2018
Made with: HTML(Pug), CSS(SCSS), JS(Babel)
33. CSS3 Loading Animations
See the Pen
CSS3 Loading animations by Manoz (@Manoz)
on CodePen.
Author: Manoz @Manoz
Links: Source Code / Demo
Created on: January 26, 2014
Made with: HTML
34. CSS Animation: Indoors Or Outdoors?
See the Pen
CSS Animation: Indoors or outdoors? by Olivia Ng (@oliviale)
on CodePen.
Author: Olivia Ng @oliviale
Links: Source Code / Demo
Created on: April 21, 2018
Made with: HTML(Pug), CSS, SCSS, JS
35. CSS Chart Animations
See the Pen
CSS Animations by amCharts (@amcharts)
on CodePen.
Author: amCharts @amcharts
Links: Source Code / Demo
Created on: December 31, 2014
Made with: HTML, CSS, JS
36. Only CSS: Motion Blur
See the Pen
Only CSS: Motion Blur by Yusuke Nakaya (@YusukeNakaya)
on CodePen.
Author: Yusuke Nakaya @YusukeNakaya
Links: Source Code / Demo
Created on: October 25, 2019
Made with: HTML(Pug), CSS, SCSS
37. Add to Cart Button Animation
See the Pen
Add to cart button by Aaron Iker (@aaroniker)
on CodePen.
Author: Aaron Iker @aaroniker
Links: Source Code / Demo
Created on: November 20, 2020
Made with: HTML, CSS, SCSS, JS
38. Connected Animation
See the Pen
connected animation by sean_codes (@sean_codes)
on CodePen.
Author: sean_codes @sean_codes
Links: Source Code / Demo
Created on: July 02, 2018
Made with: HTML(Pug), CSS(SCSS), JS
39. Card Swipe Animation Material Design
See the Pen
Card Swipe Animation Material Design by Zoë Bijl (@Moiety)
on CodePen.
Author: Zoë Bijl @Moiety
Links: Source Code / Demo
Created on: September 11, 2014
Made with: HTML(Haml), CSS(SCSS)
40. CSS Block Revealing Effect
See the Pen
CSS Block Revealing Effect by Abubaker Saeed (@AbubakerSaeed)
on CodePen.
Author: Abubaker Saeed @AbubakerSaeed
Links: Source Code / Demo
Created on: December 23, 2019
Made with: HTML, CSS, JS
41. CSS Cassette
See the Pen
CSS Cassette by Tony Banik (@banik)
on CodePen.
Author: Tony Banik @banik
Links: Source Code / Demo
Created on: September 7, 2018
Made with: HTML(Slim), CSS(SCSS)
42. anime.js logo animation
See the Pen
anime.js logo animation by Julian Garnier (@juliangarnier)
on CodePen.
Author: Julian Garnier @juliangarnier
Links: Source Code / Demo
Created on: June 26, 2016
Made with: HTML, CSS, JS
43. Windmill (Pug + SCSS) – Responsive + Animated
See the Pen
Windmill (Pug + SCSS) – Responsive + Animated by Ashish Bardhan (@AshBardhan)
on CodePen.
Author: Ashish Bardhan @AshBardhan
Links: Source Code / Demo
Created on: June 24, 2018
Made with: HTML(Pug), CSS(SCSS)
44. Animated – SVG Birds
See the Pen
Animated – SVG Birds by Steven Roberts (@matchboxhero)
on CodePen.
Author: Steven Roberts @matchboxhero
Links: Source Code / Demo
Created on: October 14, 2017
Made with: HTML, CSS, SCSS
45. Only Css Animation
See the Pen
Only Css Animation #02 by Hisami Kurita (@hisamikurita)
on CodePen.
Author: Hisami Kurita @hisamikurita
Links: Source Code / Demo
Created on: September 22, 2019
Made with: HTML, CSS
46. Only Css 3D Cube
See the Pen
Only Css 3D Cube by Hisami Kurita (@hisamikurita)
on CodePen.
Author: Hisami Kurita @hisamikurita
Links: Source Code / Demo
Created on: December 20, 2019
Made with: HTML, CSS, SCSS
47. Circle Loader with Checkmark- CSS Animation
See the Pen
CSS Animation: Circle loader with checkmark completed state by Scott Galloway (@scottloway)
on CodePen.
Author: Scott Galloway @scottloway
Links: Source Code / Demo
Created on: March 16, 2016
Made with: HTML, CSS, SCSS, JS
48. Submarine Animation (Pure CSS)
See the Pen
Submarine Animation (Pure CSS) by Akhil Sai Ram (@akhil_001)
on CodePen.
Author: Akhil Sai Ram @akhil_001
Links: Source Code / Demo
Created on: November 11, 2018
Made with: HTML, CSS, SCSS, JS
49. Cool Layout With Complex Chainable Animation
See the Pen
Cool Layout with Complex Chainable Animation by Nikolay Talanov (@suez)
on CodePen.
Author: Nikolay Talanov @suez
Links: Source Code / Demo
Created on: July 10, 2016
Made with: HTML, CSS, SCSS, JS
50. CSS Animations With SVGs
See the Pen
CSS Animations with SVGs by Joyanna (@joyanna)
on CodePen.
Author: Joyanna @joyanna
Links: Source Code / Demo
Created on: May 8, 2020
Made with: HTML, CSS(SCSS)
51. Efeito – Button Shake
See the Pen
Efeito – button shake by Sthéffane Nunes (@StheffaneNunes)
on CodePen.
Author: Sthéffane Nunes @StheffaneNunes
Links: Source Code / Demo
Created on: August 26, 2020
Made with: HTML, CSS
52. The Three-Body Problem
See the Pen
The Three-Body Problem by Vian Esterhuizen (@heyvian)
on CodePen.
Author: Vian Esterhuizen @heyvian
Links: Source Code / Demo
Created on: January 9, 2020
Made with: HTML, CSS, SCSS
53. CSS Flame Animation
See the Pen
CSS Flame Animation by Adrian Payne (@dazulu)
on CodePen.
Author: Adrian Payne @dazulu
Links: Source Code / Demo
Created on: October 06, 2013
Made with: HTML, CSS, JS
54. Only Css Animation
See the Pen
Only Css Animation #01 by Hisami Kurita (@hisamikurita)
on CodePen.
Author: Hisami Kurita @hisamikurita
Links: Source Code / Demo
Created on: September 07, 2019
Made with: HTML, CSS
55. Close The Blinds
See the Pen
Close the blinds by Chance Squires (@chancesq)
on CodePen.
Author: Chance Squires @chancesq
Links: Source Code / Demo
Created on: May 14, 2020
Made with: HTML, CSS
56. Fake Variable Font With Css
See the Pen
Fake variable font with css by Miguel (@ruidovisual)
on CodePen.
Author: Miguel @ruidovisual
Links: Source Code / Demo
Created on: June 4, 2019
Made with: HTML(Haml), CSS, Sass
57. 2020 SVG Animation | Using PathLength=1 With Stroke-dashoffset Tutorial
See the Pen
2020 SVG Animation | Using pathLength=1 with stroke-dashoffset Tutorial | @keyframers 2.29.0 by @keyframers (@keyframers)
on CodePen.
Author: @keyframers @keyframers
Links: Source Code / Demo
Created on: January 7, 2020
Made with: HTML, CSS, SCSS, JS
58. Coffee Machine Pure CSS Animation
See the Pen
Coffee Machine Pure CSS Animation by Henrique Rodrigues (@hjdesigner)
on CodePen.
Author: Henrique Rodrigues @hjdesigner
Links: Source Code / Demo
Created on: September 01, 2018
Made with: HTML, CSS
59. Tricky CSS Hover
See the Pen
Tricky CSS hover by Piotr Galor (@pgalor)
on CodePen.
Author: Piotr Galor @pgalor
Links: Source Code / Demo
Created on: July 20, 2018
Made with: HTML, CSS
60. Some SVG animation & keyframes
See the Pen
Some SVG animation & keyframes by Andrej Sharapov (@andrejsharapov)
on CodePen.
Author: Jean Paze @jeanpaze
Links: Source Code / Demo
Created on: October 31, 2016
Made with: HTML, CSS
61. ROCK
See the Pen
ROCK ???? by Vangel Tzo (@srekoble)
on CodePen.
Author: Vangel Tzo @srekoble
Links: Source Code / Demo
Created on: December 16, 2018
Made with: HTML, CSS, SCSS, JS
62. Letter CSS Animation
See the Pen
Letter I #36daysoftype #css #cssanimation by Miguel (@ruidovisual)
on CodePen.
Author: Miguel @ruidovisual
Links: Source Code / Demo
Created on: March 12, 2020
Made with: HTML, CSS, SASS
63. Pure CSS “Eye”
See the Pen
Pure CSS “Eye” by Julia Miocene (@miocene)
on CodePen.
Author: Julia Miocene @miocene
Links: Source Code / Demo
Created on: April 12, 2020
Made with: HTML, CSS(PostCSS)
64. Pure CSS Card Animation
See the Pen
Pure CSS Card Animation by Deniz Parlar (@denizparlar)
on CodePen.
Author: Deniz Parlar @denizparlar
Links: Source Code / Demo
Created on: April 14, 2017
Made with: HTML, CSS
65. CSS Mask Animation
See the Pen
CSS Mask animation by Shaw (@shshaw)
on CodePen.
Author: Shaw @shshaw
Links: Source Code / Demo
Created on: May 19, 2018
Made with: HTML, CSS, SCSS
66. H2O – Chemical Flask (Animation)
See the Pen
H2O – chemical flask (animation) by Ekaterina Vasilyeva (@ekaterina_vasilyeva)
on CodePen.
Author: Ekaterina Vasilyeva @ekaterina_vasilyeva
Links: Source Code / Demo
Created on: December 14, 2018
Made with: HTML, CSS
67. Sausage Dog CSS Only Animation
See the Pen
Sausage dog CSS only animation by Stivs (@stivaliserna)
on CodePen.
Author: Stívali Serna @stivaliserna)
Links: Source Code / Demo
Created on: April 13, 2020
Made with: HTML, CSS
68. Sticker
See the Pen
Sticker by ycw (@ycw)
on CodePen.
Author: ycw @ycw
Links: Source Code / Demo
Created on: February 5, 2019
Made with: HTML(Pug), CSS(Less)
69. Perspective Grid W/Animation // CSS Grid
See the Pen
Perspective Grid w/Animation // CSS Grid by Brian Haferkamp (@brianhaferkamp)
on CodePen.
Author: Brian Haferkamp @brianhaferkamp
Links: Source Code / Demo
Created on: August 18, 2017
Made with: HTML(Pug), CSS(Sass), JS
70. CSS Animation: Time Of Day
See the Pen
CSS Animation: Time of Day by Olivia Ng (@oliviale)
on CodePen.
Author: Olivia Ng @oliviale
Links: Source Code / Demo
Created on: April 23, 2018
Made with: HTML (Pug), CSS(SCSS), JS
71. Rock’N’Roll Half-Marathon Animation
See the Pen
Rock’N’Roll Half-Marathon animation by Kyle (@kaisle)
on CodePen.
Author: Kyle @kaisle
Links: Source Code / Demo
Created on: March 30, 2020
Made with: HTML, CSS, SCSS
72. Circle Becomming Square
See the Pen
circle becomming square by Hayakawa (@hayamine01)
on CodePen.
Author: Hayakawa @hayamine01
Links: Source Code / Demo
Created on: September 3, 2019
Made with: HTML, CSS
73. Evening Lanterns
See the Pen
Evening Lanterns by Braydon Coyer (@braydoncoyer)
on CodePen.
Author: Braydon Coyer @braydoncoyer
Links: Source Code / Demo
Created on: March 5, 2020
Made with: HTML(Pug), CSS (SCSS), JS TypeScript
74. Mr. JeellyFish pure CSS animation
See the Pen
Mr JeellyFish pure CSS animation by Fabio (@FabioG)
on CodePen.
Author: Fabio @FabioG
Links: Source Code / Demo
Created on: August 28, 2015
Made with: HTML, CSS, SCSS
75. CSS Reveal Animation Text And Image
See the Pen
CSS Reveal animation text and image by Anthony Fessy (@antho-fsy)
on CodePen.
Author: Anthony Fessy @antho-fsy
Links: Source Code / Demo
Created on: March 14, 2017
Made with: HTML, CSS, SCSS, JS
76. Candles (Pure CSS Animation)
See the Pen
Candles (Pure CSS Animation) by Akhil Sai Ram (@akhil_001)
on CodePen.
Author: Akhil Sai Ram @akhil_001
Links: Source Code / Demo
Created on: November 1, 2018
Made with: HTML, CSS, SCSS
77. Image Animation
See the Pen
image animation by nguyencaotai1969 (@nguyencaotai1969)
on CodePen.
Author: nguyencaotai1969 @nguyencaotai1969
Links: Source Code / Demo
Created on: August 24, 2020
Made with: HTML, CSS
78. Product Page | CSS Keyframes Animation
See the Pen
Product Page | CSS Keyframes Animation by Kaio Almeida (@KaioRocha)
on CodePen.
Author: Kaio Almeida @KaioRocha
Links: Source Code / Demo
Created on: July 2, 2019
Made with: HTML, CSS, SCSS
79. Grogu Toggle Animation
See the Pen
Grogu Toggle by Kristopher Van Sant (@KristopherVanSant)
on CodePen.
Author: KRISTOPHER VAN SANT @KristopherVanSant
Links: Source Code / Demo
Created on: March 19, 2021
Made with: HTML, CSS
80. Get Attention Animations
See the Pen
Get Attention Animations by Jerry Jones (@jeryj)
on CodePen.
Author: Jerry Jones @jeryj
Links: Source Code / Demo
Created on: September 11, 2017
Made with: HTML(Haml), CSS(SCSS), JS(Babel)
81. Info Cards Concept
See the Pen
Info Cards Concept by Yancy Min (@yancy)
on CodePen.
Author: Yancy Min @yancy
Links: Source Code / Demo
Created on: October 08, 2018
Made with: HTML, CSS, SCSS
82. The Perpetual Mobile. (Elastic Bounce)
See the Pen
The perpetual mobile. (Elastic bounce) by Jomohop (@jomohop)
on CodePen.
Author: Jomohop @jomohop
Links: Source Code / Demo
Created on: August 17, 2019
Made with: HTML, CSS