Css animation with example

113 Beautiful CSS Animation Examples

Here are some of the most beautiful CSS animation examples for you.

You may also like

• 75 CSS Text Animations You Can Use
• 15 Amazing CSS Animated Background for you to try
• 57 Beautiful CSS Cards examples to improve your UI
• 19 Cool CSS Loading Animation to inspire you
• 17 Fancy CSS Search Boxes
• 21 Modern CSS menu examples
• 19 Stylish CSS forms
• 23 Fantastic CSS Hover Effects
• 19 CSS Border Animations you can implement
• 15 Stylised CSS Tables
• 13 Pure CSS Dropdown Menus
• 15 Creative CSS Filter Examples
• 35 Unique CSS Text Effects
• 15 CSS Sliders you can use
• 21 New Bootstrap Login Forms for you
• 19 Bootstrap Profiles you can use for yourself
• 13 Material Design Login Forms
• 35 Cool CSS Select Boxes
• 15 CSS Range Sliders you can use today
• 35 Creative use of CSS clip-path examples
• 29 Unique CSS Toggle Switches

Cloudy Spiral CSS animation

Dev: Hakim El Hattab

Parallax Star background in CSS

Dev: Saransh Sinha

Pure CSS 3D Sphere

See the Pen Pure CSS 3D Sphere by Sergej Skrjanec (@iamlark) on CodePen.

Dev: Sergej Skrjanec

Neumorphism animation

Dev: masuwa

CSS Animation Material Design

Dev: Zoë Bijl

walking cat

Funny Candle Pure CSS Animation

Dev: Kevin David

Rotation & background experiment

Dev: Zach Saucier

Mr JeellyFish pure CSS animation

wave (CSS animation)

Dev: Anton Mudrenok

CSS Animation with steps()

Dev: Guil H

CSS Bouncing Ball

Dev: Rob Glazebrook

[CSS Animation] PCPP Loading Boxes

Animated CSS Mail Button

Dev: Jake Giles-Phillips

CSS Animation 101 – Hero image

Dev: Donovan Hutchinson

Never-ending box

Speedy truck

See the Pen Speedy truck by Chris Johnson (@ChrisJohnson) on CodePen.

Dev: Chris Johnson

Pure CSS watch animation

Dev: Grzegorz Witczak

Heartbeat css animation

Dev: Fivera

Cinematic Animation

Dev: @keyframers

CSS Animation with motion

Dev: Henry Zarza

Just another CSS UI

Dev: Jamie Coulter

See the Pen Mood Swing by Alexander Mold (@alexjmold) on CodePen.

Dev: Alexander Mold

Baby problems | HTML + CSS

Dev: Cameron Fitzwilliam

Santa’s Reindeer

Dev: Ivan Odyntsov

Square in a circle – Loading Animation

Drone Delivery Submit CSS Animation

Dev: Nikolay Talanov

Underwater Pure CSS Animation

Dev: tOazty

Bits & Bytes | CSS Animation

CSS animation – Dancing pug

Dev: Angela Velasquez

SVG Animation

Dev: jjperezaguinaga

Flat design amusement park svg by Lina (animation powered by CSS)

CSS Animation: Time of Day

Dev: Olivia Ng

CSS Animation: Indoors or outdoors?

Dev: Olivia Ng

Cyclone Magic – CSS

Dev: Nate Wiley

See the Pen Fire! by Mario Duarte (@MarioDesigns) on CodePen.

Dev: Mario Duarte

UpTown Spot – CSS animation

Dev: Stívali Serna

Only Css Animation #01

Dev: Hisami Kurita

Singing Octo CSS Animation

Dev: Ivan Odyntsov

Animated MSV rocket logo in full CSS

Dev: Anas Alaoui

CSS Gangham Style

See the Pen CSS Gangham Style by Estelle Weyl (@estelle) on CodePen.

Dev: Estelle Weyl

Pure CSS The Carlton dance

Dev: Grzegorz Witczak

Solar System animation – Pure CSS

Dev: Malik Dellidj

Checkerboard Reveal

Dev: Geoff Graham

Dev: Toshiya Marukubo

Happy Birthday

Dev: Mkrtchyan

Monster Energy SVG logo animated

Dev: Tim Pietrusky

CSS Site Scroll Micro Animation

Dev: Ryan Mulligan

CSS Wave Animation

Dev: Jelena Jovanovic

Illustration brought to life

Dev: Waldo Broodryk

CSS only particle system

Dev: Robin Selmer

Bird-animation

See the Pen bird-animation by Akash bhandwalkar (@__akash__19) on CodePen.

Dev: Akash bhandwalkar

Day and Night

Dev: Stéphanie Walter

Desk CSS Animation

Dev: Luisho Martínez

CSS Typing Effect

Signature animation

Dev: Damian Drygiel

CSS arrow down bouncing

Dev: dodozhang21

Map marker CSS only

See the Pen Map marker CSS only by Andreas Storm (@avstorm) on CodePen.

Dev: Andreas Storm

Animated Radio Inputs

Dev: simurai

CSS falling leaves

See the Pen CSS falling leaves by Aaron Griffin (@uurrnn) on CodePen.

Dev: Aaron Griffin

Authentic Weather Loader

Dev: Tim Holman

Pure CSS “Moustached Nanny”

Dev: Julia Miocene

CSS Raindrops on a Window

Dev: Lucas Bebber

Animated – SVG Birds

Dev: Steven Roberts

CSS 3D Bending Effect – Page Flip

Dev: Fabrizio Bianchi

CSS & SVG Waves Animation

Dev: Ted McDonald

Floating Cloud Background

See the Pen Falling by yuanchuan (@yuanchuan) on CodePen.

Dev: yuanchuan

Handwriting: SVG animation

Dev: Lars Munkholm

See the Pen Waves by Rico Sta. Cruz (@rstacruz) on CodePen.

Dev: Rico Sta. Cruz

StarWars BB-8 CSS Illustration + Animation

Dev: DevTips

Only CSS: Moon Clip

Dev: Yusuke Nakaya

CSS is Awesome

See the Pen CSS is Awesome by Mikael Ainalem (@ainalem) on CodePen.

Dev: Mikael Ainalem

CSS Animated 3D Toaster

CSS only animated solar system

Dev: Cynthia Costa

Folding panorama animation

Dev: Bennett Feely

CSS Animation SVG Building

Dev: Luisho Martínez

Close the blinds

See the Pen Close the blinds by Chance Squires (@chancesq) on CodePen.

Dev: Chance Squires

CSS Animations with SVGs

Dev: Joyanna

Pure CSS “Eye”

See the Pen Pure CSS «Eye» by Julia Miocene (@miocene) on CodePen.

Dev: Julia Miocene

Sausage dog CSS only animation

Dev: Stívali Serna

Rock’N’Roll Half-Marathon animation

Letter animation

Dev: Miguel

Evening Lanterns

Dev: Braydon Coyer

Animation with offset motion blur

Dev: Lasse Diercks

Only CSS: Motion Blur

Dev: Yusuke Nakaya

2020 SVG Animation

Dev: @keyframers

CSS Block Revealing Effect

Dev: Abubaker Saeed

Only CSS 3D Cube

Dev: Hisami Kurita

CSS Typewriter

Dev: Aaron Iker

Fake variable font with css

Dev: Miguel

The perpetual mobile. (Elastic bounce)

Dev: Jomohop

The Three-Body Problem

Dev: Vian Esterhuizen

Only CSS Animation

Dev: Hisami Kurita

Paper Pirouette

Dev: @keyframers

Circle becoming square

Dev: Hayakawa

Only CSS Animation

Dev: Hisami Kurita

Product Page | CSS Keyframes Animation

Dev: Kaio Almeida

Some SVG animation & keyframes

Dev: Andrej Sharapov

Transform-box: fill-box

Dev: Cassie Evans

Submarine Animation (Pure CSS)

Dev: Akhil Sai Ram

See the Pen ROCK ? by Vangel Tzo (@srekoble) on CodePen.

Dev: Vangel Tzo

Coffee Machine Pure CSS Animation

Dev: Henrique Rodrigues

CSS Box Dog (Tony Babel)

Dev: agathaco

Whale and the Moon

Dev: Aswin Behera

CSS Lighthouse Scene

Dev: agathaco

Solar eclipse

Dev: Aris Acoba

Windmill Animated

Dev: Ashish Bardhan

Pure CSS Saturn Hula Hooping

Dev: Jamie Coulter

Pure CSS “Sponge”

See the Pen Pure CSS «Sponge» by Julia Miocene (@miocene) on CodePen.

Dev: Julia Miocene

Magnifying glass scrolling loop animation

Dev: Yancy Min

Bongo Cat Codes

Dev: Caroline Artz

Источник

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

2. Only Css Animation

3. Only Css Animation #01

4. Pure CSS «Eye»

5. Close The Blinds

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)

7. Sausage Dog CSS Only Animation

8. Evening Lanterns

9. Letter CSS Animation

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

11. The Three-Body Problem

12. Only Css 3D Cube

13. CSS Block Revealing Effect

14. Only CSS: Motion Blur

15. CSS Typewriter 📄

16. Only Css Animation

17. Animation With Offset Motion Blur

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.

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.

20. Product Page | CSS Keyframes Animation

21. Circle Becomming Square

22. Sticker

23. UI Elements — SVG Animation

24. Fake Variable Font With Css

25. H2O — Chemical Flask (Animation)

26. ROCK 🎸

27. Submarine Animation (Pure CSS)

28. CSS Cassette

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

30. Whale And The Moon

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 .

32. Coffee Machine Pure CSS Animation

33. Solar Eclipse

34. CSS Lighthouse Scene

35. Bits & Bytes | CSS Animation

36. Pure CSS «Moustached Nanny»

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

38. Books Hover Animation

39. Magnifying Glass Scrolling Loop Animation

40. The Handbook Download Animation

41. Connected Animation

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? 🤔

43. CSS Mask Animation

44. CSS Animation: Time Of Day

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.

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 😀 Icons: flaticon.com.

47. CSS-only Border Animation

48. Pure CSS Saturn Hula Hooping

49. Pure CSS «Sponge»

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.

Источник