80+ CSS Animations

Last Updated on by in CSS Examples
CSS Animation

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

Digamber - Author positronX.io

Hi, I'm Digamber Singh, a New Delhi-based full-stack developer, tech author, and open-source contributor with 10+ years' experience in HTML, CSS, JavaScript, PHP, and WordPress.