Tag Archives: css

Do A Barrel Roll – CSS Animation


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).
Read on to see this post do a barrel role and learn more about CSS animations

Single Element 3D Cube


The other day I saw some post about cubes in HTML/CSS using 3 different elements inside a container element. I then got to thinking: what if I did that with just a single element and all CSS? I then started messing around and eventually came out with the following. Fair warning: it only works properly in Firefox 4.0+ See the cube in action

 
Δ
Back to Top