Do A Barrel Roll – CSS Animation

By: McSwindler

If you’re here, you’ve probably seen what happens when you search for “do a barrel roll” on Google. This is done by some simple CSS animation.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
@-moz-keyframes roll {
    100% {
        -moz-transform: rotate(360deg);
    }
}
@-o-keyframes roll {
    100% {
        -o-transform: rotate(360deg);
    }
}
@-webkit-keyframes roll {
    100% {
        -webkit-transform: rotate(360deg);
    }
}
body {  
    -moz-animation-duration: 4s;  
    -moz-animation-name: roll;  
    -moz-animation-iteration-count: 1;
    -webkit-animation-duration: 4s;  
    -webkit-animation-name: roll;  
    -webkit-animation-iteration-count: 1;
    -o-animation-duration: 4s;  
    -o-animation-name: roll;  
    -o-animation-iteration-count: 1;  
}

The CSS is simple enough, it sets the duration to last for 4 seconds, then the type of animation is set by “name” which is “roll”, and finally it is set to play only once. The important thing is how you get the animation “roll”. This is set by using the @-prefix-keyframes with the identifier “roll”, this enables you to create sort of animation functions. @keyframes allows for standard CSS properties to change based on the percentage of the duration completed. Within the @keyframes you can use any percentage, and as many as you like, to set properties; or the to and from keywords. In the above code, 100% could easily be replace with the to keyword. The same code is then repeated with the various prefixes for cross-browser compatibility. Currently the only supported browsers are Chrome, Firefox 5.0+, Safari 4.0+, and Opera? (Opera has not been fully tested).

A fun thing I just added to the Google code is some jQuery to make the animation play after a user presses Z or R twice. :P All that is needed is a simple jQuery keydown function and an additional CSS property. The CSS is animation-play-state: paused; this will stop the animation from playing by default. Then the following JS will detect two consecutive Z or R presses.

1
2
3
4
5
6
7
8
9
10
11
var lastKey = 0;
$(document).keydown(function(e){
    if((e.keyCode == 82 && lastKey == 82) || (e.keyCode == 90 && lastKey == 90)){
        lastKey = 0;
        $("body").css({'-moz-animation-play-state': 'running', '-webkit-animation-play-state': 'running', '-o-animation-play-state': 'running'});
        console.log("Barrel Roll!");
    } else {
        lastKey = e.keyCode;
    }

});

CSS Animations are a fun little addition to any website that can replace simple Javascript functions. The following changes colors and moves back and forth across the page.
Oooooh, ahhhh, pretty nifty!

The CSS code for this animation is as follows:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
@-moz-keyframes slider {  
    from {  
        margin-left:80%;
        width:20%;
        color: #00f;
    }
    50% {
        color: #f00;
    }

    to {
        margin-left:0;
        width:100%;
    }
}
#anim-test {
    -moz-animation-duration: 10s;
    -moz-animation-name: slider;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: alternate;
    -webkit-animation-duration: 10s;
    -webkit-animation-name: slider;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    -o-animation-duration: 10s;
    -o-animation-name: slider;
    -o-animation-iteration-count: infinite;
    -o-animation-direction: alternate;
    display:block;
    line-height: 20px;
    height:40px;
    color: #0f0;
}

The @keyframes code moves the text from left to right using margins, and changes from green to red at 50%, then to the default color, blue, at 100%. Some changes to note about the initialization of the animation are the count is infinite, and the new direction property. The count as infinite will run forever as opposed to a finite number. The direction can either be normal (default) or alternate. Alternate will run the animation from 0% to 100% then run backwards to 0%. Normal will start at 0%, move to 100%, then immediately start back at 0%.

There are many other CSS animation functions, and I simply can’t cover them all because I really don’t know them all to be honest. :P These are just the simple capabilities of animations that can give you a running start to add rich, fancy content to your website.

The Mozilla MDN has some great documentation of CSS animations and all other CSS properties which is very helpful when diving into the new CSS3.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

 
Δ
Back to Top