Now Viewing
the animation

Subscribe via RSS

Fancy Animated Hamburger Menus

I made a quick pen for yall to create a hamburger icon that animates to an X for close. Super simple with just a few lines of CSS and JS! <a class="fancy-menu" href="#"> <span></span> <span></span> <span></span> </a> <a class="fancy-menu" href="#"> <span></span> <span></span> <span></span> </a> .fancy-menu { display: inline-block; }   .fancy-menu span { background: #000; border-radius: 3px; display: block; height:...

Read More

CSS3 Transforms Card Flip Animation

Short and simple this week! I needed to code a card flip animation on hover for a client. I love how simple it is to create cool animations in CSS3. Just a couple lines of code needed! Just uses CSS3 transforms and some backface-visibility. See the Pen CSS3 Transforms Card Flip Animation by Amber Weinberg (@amberweinberg) on CodePen.

Read More

CSS3 Animated Buttons

Today I was tasked with creating some wacky CSS3 animated buttons. I started out by looking at one or two tutorials before I was able to come up with something of my own. The button made use of three typical states: regular, hover and active. I started out by coding the buttons so they’d look fine in non-animation capable browsers....

Read More