CSS Examples: 16 Animations, Effects and Snippets

You’re probably wondering what you can and can’t do with CSS. The answer? You can do a lot.

From loading animations to button micro interactions that make UX a breeze, from progress bars to smooth animated hamburger menus and from Google Maps-style markers to Post-it animations, CSS3 used correctly will deliver a fantastic user experience and will use browser optimizations to make all your animations smooth and natural

Want to know the best part?

CSS is easy to learn and all you need to do is use the right patterns and the right animation properties. Everything falls into place and gets beautifully rendered by the browser – whether your user is on Chrome, Firefox, Safari or Internet Explorer/Edge

It gets better:

We collected 16 CSS Animations and Effects for you to try here on this page and we included code snippets for all our animations

Our animations are hosted on CodePen, and all you need to do is click Edit on CODEPEN at the top of each animation to view all the code and start editing and experimenting. You can change colors, width, captions, animation type… and you can add to our code and build your own animation on top of ours

Here’s the deal:

You don’t want to over do animations and effects on your site. UX needs to guide users through layout and navigation, and animated micro interactions are there to provide feedback to a user action. Like clicking a button. Hovering on an image

No external plugins and no JavaScript are ever used in these examples. All you need is HTML and CSS. Sometimes we are going to use a pre-processor like LESS and SASS, and many times we included fonts from Google Fonts. That’s it

And one last thing:

If you improve on our animations why not save yours on CodePen and share it with us in the comments?

Button Hover Micro Interaction

Here is a classic example of a micro interaction. Hover on the button and the color brightens up, the arrow at the bottom grows larger and the entire button moves slightly down. Just as if you were about to push it. Your user now knows that button is alive and all of that is accomplished with no interference to the user experience

CSS <transform-function> used: N/A

Smooth Checkboxes

Did you ever feel like all form checkboxes look the same? As in, boring and lifeless? Check out these animated, colored and smooth checkboxes. You can use them normally in a form and send data to a server. At the same time, you’ll keep your users happy and engaged

CSS <transform-function> used: rotate, scale, translate3d

Hamburger Menu

Here is a hamburger menu that uses CSS animations. When you click on the menu, the three lines magically animate into an X. This is when the rest of your app shows the menu to the user. And when a user wants to close the menu and clicks on the X, it magically animates back into a hamburger

CSS <transform-function> used: scale, rotate

Magazine Article Box Hover

Hover on the article image and you’ll see a smooth transparent background cover the image, along with the article title, subtitle, and a button that invites to find out more.

CSS <transform-function> used: translateY

Bubble Loader

A simple and stylish bubble animation loader. The property that makes it run smooth is the ease-in-out animation timing function. Make sure you include it!

CSS <transform-function> used: rotate, scale

Floating Form Labels

Just as we’re able to make checkboxes attractive, we can give a good animated spin to to input elements for text and password. Take the placeholder as an example: what if instead of abruptly disappearing, it shrunk and floated to the top of the input element? And what if the placeholder acted also a label? Our animation accomplishes all that

CSS <transform-function> used: scale, rotateY

Settings Checkbox

And again more checkbox goodness for our beloved forms. Click on the green tick above and watch as it smoothly animates into a red X. Click again, and it will animate back to a green tick

CSS <transform-function> Used: rotate

Flip Card

Here is a simple micro interaction for a card. This is our second animation built with magazines and blogs at heart. On one side of our card we have the article image. And when a user hovers on the card, it flips to reveal the article title and subtitle

CSS <transform-function> Used: rotateY

Animated Bio Card

Here’s a spin on a classic bio card. The image grows larger and animates into place, and at the same time the bio itself slides in smoothly from the left hand side. A simple nice touch to turn a static bio card into a more eye catching experience. If you missed this animation, just click the RERUN button!

CSS <transform-function> used: scale

Post-it

This is my personal favorite. A Post-it! Everything is very simple. It looks and feels like a real Post-it, animates when you over on it, and you can use it to make a <ul>/<li> TODO list look more… human

CSS <transform-function> used: rotate, scale

Drawers

Almost all menus of every site are on the top navbar and have dropdown capabilities. Why not switch things around for a bit of fun and to make our app stand out? These drawers are on the left hand side of the user’s screen, and when you hover on them… they slide out. Neat, right?

CSS <transform-function> used: N/A

Bouncy Map Marker

Here is an animated map marker. If you didn’t see it bouncing its way into the frame, just hit the RERUN button on the animation. On top of that, a small circle animates from its base to keep the user engaged

CSS <transform-function> Used: rotate, rotateX, translateY, scale

Animated Toggles

And once again in our form selection, here is our animated spin on checkboxes, radio buttons and toggles. The palette in these is uniform, and every click on the input elements is associated with a smooth micro interaction. Minimal and helps users respond to an otherwise non-engaging form

CSS <transform-function> Used: N/A

Animated Ribbon

The entire ribbon is drawn in CSS. No SVG and no images. And the animation? A keyframe set of instructions that expands and reduces the width with the ease-in-out timing function

CSS <transform-function> Used: N/A

Progress Bar

A simple, stylish and minimal progress bar. They’re a classic and we’re going do need them for a long time. Our spin pushes a light blue div – with postion: absolute – from the left hand side with a smooth ease-in-out animation

CSS <transform-function> Used: N/A

Photo Rollover

And here is our last animation. This one is – like others before in our selection – made with magazines and blogs at heart. Hover on the article image and it’ll roll up and reveal the article title, author and a button that invites the user to read more

CSS <transform-function> Used: translateY

Now it’s your turn

How are you, dear reader? Was our journey through 16 CSS animations and effects worth your time?

Now it’s your turn: open up your favorite animation from our list and start coding away on CodePen. Change it any way you like. Mess around. Let your creativity flow

And when you’re happy with your very own animation, why not add it to the comments section below and let our other readers see it?

We promise we’ll comment on every animation you submit

Are you ready?