Discover the best css animation websites created by professional designers. Get inspired and start planning your perfect css animation web design today!

Joseph Berry

Winner of Honorable Mention and Site of the day on Awwwards 
and awarded the Mobile Excellence award 

Tutorial On Hero section.
https://www.youtube.com/watch?v=yWq81qwpOCI&t=311s

Having fond memories of The Goonies, I decide to create a website that re-lives those magic moments. This site is jam packed full of amazing animations and interactions so please do explore the full site. 

Enjoy.

The Goonies

Timothy Ricks

Watch tutorial at https://www.youtube.com/watch?v=GxZ1aAriLxk

CSS Animations

Marcin Rzymek

Looking for animated banner for your next project?
Simple, yet effective, eye-catching element with your message.

Thinking accessibility? Hover over the element to pause the animation.

- Feel free to clone the entire project, copy/paste marquee component or just one of the marquee elements.
- Adjust animation duration in embed element (CSS).

__
Why to bother?
Most of use use interaction panel to create such effect. But why to generate JS if we might achieve same effect much easier with just a few lines of CSS, having better control over the animation and being able to stop it on hover, click or other trigger (using CSS or jQuery). Just sayin ;) 

Have fun!

Infinite marquee CSS based (Cloneable)

Watch lesson at https://www.timothyricks.com/resource/css-hover

CSS Hover

Jonas Arleth

I created a YouTube tutorial here (german): 
https://youtu.be/C1k6bm8ybBY

Navigation Mega Dropdown (+ custom animation)

Leah Quinn

Quain tInc is a brand/design studio that also includes a shoppe and blog. The brand’s quirky & vintage aesthetic promotes living a more “Quaint Life” and embracing all the simple and peculiar things that contribute to the beauty of life.

Quaint Inc

Eduard Bodak

Simple Button Animations with CSS. No double content. Respects Touch Devices.

Little Library which will be updated from time to time with new buttons. To get updated and more follow.

Tiny Mighty Buttons

Francesco Castronuovo

Hi my gorgeous friends of Webflow,

This time I merged Webflow interactions and animations with a bit of CSS animations and JavaScript to create a fun and entertaining countdown timer.

Why is it different from all other timers you can find on Webflow Showcase?

Because it has a custom sliding CSS animation, it is completely based on attributes, and it is modular!

How to use it in your own projects? Just click on "How does it work?" to open the instruction pop-up.

Oh, and don't forget to scroll down the page! 😁

Enjoy, clone, and feel free to leave a comment!

Have an awesome Webflow journey y'all,
Francesco

P.S. Feel free to visit my YouTube channel:
https://www.youtube.com/@francescocastronuovo

Countdown Sliding Timer

Pixeto | B2B Webflow Agency, 7x Awwwards

Pixeto Private Limited

Spent less time on micro interaction. Transform ordinary web elements into extraordinary experiences with our hover animation library.

This is an ever-growing project. We will continue to add quality animations over time. Some are built entirely with CSS, while others use Webflow animation. The cloneable walkthrough video link ----https://youtu.be/08_z_Fe6GIo?si=oZzhH7RrM6foBFFf

CSS Hover Animation Library by Pixeto

Mason Pajunas

Portfolio website design and development for Henry Northington, a writer, creator, and brand specialist.

The site aims to showcase Henry’s personality as well as his work through an interactive pixel-based, retro word-processor style journey.

Super fun to design and build from beginning to end. Big thanks to Henry for the opportunity to build something unique and packed full of enjoyable moments.

View the live site here ↓
https://www.henrynorthington.com/

Henry Northington Portfolio

Animated gradient on any text.
Based on Client-first style system v.2.

How to use it in your project:
1. Copy & Paste custom code into an embed element or copy the animated-gradient_embed symbol directly into your project.
2. Add .animated-gradient class to any text element you'd like to have this effect applied or to its parent div.
3. Change values if you'd like to use different colors, rotation, or timing of your animated text.

Animated gradient on text

Manish Pandey

Sidebar Navigation Menu reveals animation using CSS Transform. Click on the MENU link to reveal the sidebar menu. Inspired by Garoa Skincare.

Click on Say hello 👋  for work or any other related queries. Follow for more.

Sidebar Menu Animation using CSS

Nathan Dennis

I was playing around with Webflow's CSS Grid functionality and realised that if you make a net of a box using CSS Grid, then just folded the sides together using the transform options and then use Webflow's animation abilities to rotate the element everything's in you could make a 3D box. I was playing around with this when I was making my new portfolio website so I put one of my website designs on the box.

3D Animated Box Model Made With CSS Grid

Rishabh Rai

This button is a dynamic and interactive button styled with CSS. The "FlutterTop Studio" button has several advanced styling features, including gradients, animations, and hover effects. Below is a breakdown of the key components:

Animation-Button

Laser Design

Each button has its own unique style and animation approach:
✨ Some use light CSS animations
⚡ Some rely on native Webflow interactions
🧠 And a few showcase the brand-new GSAP integration

Whether you’re a designer looking for inspiration or a developer wanting ready-to-use microinteractions, this pack is for you.
All 30 buttons are 100% free to clone — just copy, tweak, and make them your own!

30+ Button Hover Animation - Laser Design

An accessible Dialog/Modal in Webflow. You can use it also as a menu. Animating with CSS. Enhanced with a drawer with JavaScript.

Accessible Dialog / Modal

Create an infinite vertical marquee in Webflow with custom CSS. Showcase names, images, or icons in a looping scroll for a dynamic, eye-catching design.

English Tutorial: https://youtu.be/c0tYRTTi1-I

Infinite Looping Vertical Text Marquee For Your Portfolio – Free Template

Dilshad Khaliq

Glowing the card border with the mouse, move over the element in Webflow using CSS and JS.

It's fully responsive and cross-browser compatible.

Glowing Card Effect On Hover

102022939

1026885926

102976941

1038319252

gpt-5-nano

1098530826

gpt-4.1-mini

112746687

Get direct access to benefits like unlimited staging sites and more control over roles & permissions

Unlock more for your business with the

1131232030

Custom code and scripts won’t be supported.

Custom code

You won’t be able to export HTML and CSS files.

Code export

You won’t be able to manage site-level access and publishing.

Site-level roles & permissions

{{count}} {{sites}} {{exceed}} client seat limit. Excess seats will be removed.

Client seats

Free guest access to client Workspaces won’t be available.

Guest access

Staging sites will be unhosted with limited CMS, and no passwords or redirects.

Staging sites

1138017326

claude-sonnet-4-5

1181518147

1186914386

claude-opus-5

119812244

1207293145

1249999967

1270011358

1274323923

1338389614

140432223

1444732314

1462086697

1506258256

1514009179

15382271

1559290700

1567550242

1592612642

1609688815

1621889036

1631162196

1674778404

1692956854

1696523225

17004821

1726628865

173867728

173927913

1768015773

gpt-5.5

1771795565

1863160016

1870758752

1905118106

1919353748

193274770

193713651

1960278590

1975670756

1977767562

2025032126

2030598753

Outliant

Hireclix

Refokus

Kinetic

Heco

2031366339

2104957652

2144870841

2147413158

2167006968

2216482092

2243824526

2250401860

225169335

2256326107

2291666157

2320791503

2351366352

2355632600

https://s3.amazonaws.com/webflow-dev-assets/66fd83b6cc0c8c6ed0e398e6%2Fcontent.json

2355832585

2401116685

2401437500

2486364096

gpt-4o

gpt-5-mini

gpt-4o-mini

2493307210

2546957535

2556595834

2624148589

2639613659

265457401

2717840929

2749253609

2789269995

2826734787

2842505721

284989039

285302288

2903381045

User Accounts will no longer be available on January 29, 2026.

Visit Webflow’s Help Center for migration guidance and more info.

2940878268

2972123611

2977143887

3022611874

3023147062

3026881092

3040272982

3056387847

3057360577

3070246498

307653616

3099012871

3106924665

3108168977

3112069432

3120801339

3125710258

3151661775

3162101956

301 Redirects

Custom Code

Code Export

Site Transfer

Join client workspaces for free and add up to 5 users from your workspace

Guest Access

Limited seats available, n sites will have client seats removed

Client Seats

Staging sites will be unhosted with limited CMS and no passwords or redirects.

Staging Sites

3201643127

3220870747

32368712

3238278814

3256408208

3258716925

3266482432

3289310561

3313039722

3315729993

Best Css Animation Websites | Free Examples & Designs

Discover Css Animation websites
built by the Webflow community

Start with a clone. Make it yours with an AI agent.

Discover Css Animation websites built by the Webflow community

Start with a clone. Make it yours with an AI agent.

Discover Css Animation websites
built by the Webflow community