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

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

I rebuild Plink's website in Webflow because I really liked the interactions they have created. I thought it would be cool to learn how to create them in Webflow, and also to make it clonable for others to have a look at and learn how to create these interactions too.

Custom code was used, but there are just a few simple lines.

Plink's website for comparison: https://useplink.com/en/

--

Tutorials incoming on my YouTube channel, subscribe 👉 youtube.com/channel/UCgwvah4M6Anta4_5ACFiuRQ

--

• Do you need web design & development? Get in touch 👉 brandenstein.co/team/andreea

• Follow my daily tips on Instagram 👉 instagram.com/andreea_uaui

• Connect with me on LinkedIn (please, tell me in the note the reason you want to connect) 👉 linkedin.com/in/uauizaui

Plink Webflow Rebuild

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

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

Nav Mega Dropdown

Navigation Mega Dropdown (+ custom animation)

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

Timer

Countdown Sliding Timer

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

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 CSS Grid Box

3D Animated Box Model Made With CSS Grid

------------------------
Warning! 
I try to put all the projects for copying, so you can reuse them and learn something new.

But you don't get the likes, which supports me. 

Please, give me a "like" if you copy the project
------------------------

This site is intended for a Russian company engaged in the construction and design of power plants. 

In this project, we tried to squeeze all the power out of the CSS-3d speed and seasoned this burning cocktail with lottie animations. 

Like pliz)

Bulid-lands

bulid-lands

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

Sidebar Menu Animation using CSS

I'm really grateful for an opportunity to collaborate with the Advanced Shelter team. Bringing you Functional Art pieces by Renan Ozturk [made in limited quantities] with Wired Snowboards & The Åre Ski Factory
All proceeds support [our ailing mother nature] & Protect Our Winters.

Advanced Shelter

Had some fun playing with CSS animations on load and scroll into view :)

You Found Waldo's Sand Box

Waldo's Sandbox

Utilizing a codepen I found implemented into the HTML Embed from https://codepen.io/yuanchuan/pen/wZJqNK

Tunnel Demo

tunnel-demo

Animated Gradient Text

animated-gradient-text

Here is a nice cloneable piece showcasing how to creating loading bars in Webflow. Please reach out if you have any questions or further explanation. :)

Loading Bars

Here's a clonable google material design form. When you write your name in one of the fields, the label stays right above the input.

Google Material Design Form

materialform

linear-rebuild

Linear Rebuild

Veza Digital

Background effect using CSS where the background color animates to other colors!

Make sure you go and grab the header code in the home page to make this work!

Use with caution, watching this gradient gave me a headache 😅

Discover cssanimation websites built by the Webflow community

Discover cssanimation websites built by the Webflow community