News

Create a cool CSS3 shake effect

Discover how to use CSS3 animation to make a page element shake

css logo

INSPIRATION: cervezaaustral.cl/viajealorigen

This website for a Chilean beer makes maximum use of the country’s stunning scenery to sell the product. The bottle is shown against a series of backgrounds that promote the idea of the product being produced using natural ingredients. Clever photography also blends the bottle into the landscape, making a clear connection.

There are a series of videos explaining the processes behind the brewery, and this beautiful fullscreen presentation of both the imagery and videos helps to create an immersive user experience. This great experience is then further heightened by the  use of parallax scrolling and interactive elements in response to the user touching the site.


DOWNLOAD TUTORIAL CODE

TECHNIQUE
Shake your bottle with CSS3

Some basic HTML

Our page doesn’t require much in the way of HTML markup. A simple <div> for the bottle (although an image would have done equally well), and an image for the bottle to sit on is sufficient. There’s no need for any scripting with this technique at all!

Add basic styles

The body element will be given a background image that’s set to fill the screen, regardless of window size. We’ll add the styles at this stage for the bottle, so add the code to your HTML document between the style tags, within the <head> section. Note the background-size, forcing the image to fill the space.

Create an animation

We need to define a preset animation that will be applied to the bottle when it’s hovered over. To do this we use the @-keyframes directive. We’re testing in Chrome, so to save replicating the code for all vendor prefixes, we’ve just used the WebKit variant. You should ensure you cover all vendors in your code.

001        @-webkit-keyframes shake {
 002            0% { -webkit-transform:         translate(2px, 1px) rotate(0deg); }
 003            10% { -webkit-transform:     translate(-1px, -2px) rotate(-2deg); }
 004            20% { -webkit-transform:     translate(-3px, 0px) rotate(3deg); }
 005            30% { -webkit-transform:     translate(0px, 2px) rotate(0deg); }
 006            40% { -webkit-transform:     translate(1px, -1px) rotate(1deg); }
 007            50% { -webkit-transform:     translate(-1px, 2px) rotate(-1deg); }
 008            60% { -webkit-transform:     translate(-3px, 1px) rotate(0deg); }
 009            70% { -webkit-transform:     translate(2px, 1px) rotate(-2deg); }
 010            80% { -webkit-transform:     translate(-1px, -1px) rotate(4deg); }
 011            90% { -webkit-transform:     translate(2px, 2px) rotate(0deg); }
 012            100% { -webkit-transform:     translate(1px, -2px) rotate(-1deg); }
 013        }

Apply the animation

We can apply our animation automatically to the bottle element by creating a pseudo class for the hover state in our style code. We apply the animation by calling the animation-name property, adding additional properties to tell the browser how long the animation should take, and how many times it should run. Add the code on the resource CD to create the animation.

Set the origin

If you test your page now, you’ll see the animation in place. There’s one issue, however. The rotation is happening about the wrong point in the bottle. We’d like the base of the bottle to stay (largely) in situ, with the rotation about that point. We can set this using the transform-origin property. Add this now to see the final effect in place.

001        #bottle:hover {
 002            -webkit-animation-name: shake;
 003            -webkit-animation-duration:     0.8s;
 004            -webkit-animation-iteration-    count: infinite;
 005            -webkit-animation-timing-    function: linear;
 006            -webkit-transform-origin:    50% 100%;
 007
 008        }
×