Wanna make your site WIGGLE!?

I know what you’re thinking… a late blog post!?  But sometimes learning really jazzy CSS3 animation effects takes a little time!

You can make a CSS rule that you can apply to your site elements.  Let’s look at some code:

@-webkit-keyframes:  Defines the various states of animations when the link is hovered.  For example, at 10%, move the image slightly (translate) and rotate (degree).

@-webkit-keyframes shakeHeader {
 0% { -webkit-transform: translate(2px, 1px) rotate(0deg); }
 10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); }
 20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); }
 30% { -webkit-transform: translate(0px, 2px) rotate(0deg); }
 40% { -webkit-transform: translate(1px, -1px) rotate(1deg); }
 50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); }
 60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); }
 70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); }
 80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); }
 90% { -webkit-transform: translate(2px, 2px) rotate(0deg); }
 100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); }

Next, make an id that triggers the shakeHeader animation (defined above), as the user hovers or focuses on the element.  

#header-container:focus {
 -webkit-animation-name: shakeHeader;
 -webkit-animation-duration: 0.8s; /* This is how long the animation runs */
 -webkit-animation-iteration-count: infinite; /* Continues animation infinitely until the user navigates away from the element */ 
 -webkit-animation-timing-function: linear; /* Moves through states of animation in linear fashion */


Since we defined this for #header-container, all headers across the pages will exhibit the SHAKE/WIGGLE animation effect!  Enjoy that wigglin’


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s