In this article we’ll quickly walk-through the process of creating a CSS3 animation of an AT-AT Walker from The Empire Strikes Back. We’ll start off by reviewing some CSS3 properties that made this animation possible. Then, follow up with a list of the sections required to construct the AT-AT and the CSS3 code to move each section. I wont go too deep into the explanations of CSS3. There are various resources online to get you up to speed with CSS3.
Lets review some of the important CSS3 properties:
TRANSFORM: TRANSLATE(X Y) ROTATE(X)
-webkit-transform: translate(x,y) rotate(x)
These CSS3 transform properties are pretty self explanatory. Translate allows you to move an object left, right, up, down and the rotate property, well… rotates.
@-KEYFRAMES ‘ANIMATION-NAME’
@-webkit-keyframes 'bounce' {0 {top: 20px;}
40% {top: 0;}
60% {top: 20px;}
100% {top: 0}
}
#ball:hover {
-webkit-animation-name: bounce;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: infinite;
}
The keyframes function/property allows us to define a keyframe animation over a specified amount of time. Let me describe how the keyframe property works by explaining the code above of the bouncing animation.
At 0%, the keyframes function is placing the object 20px from the top. 40% into the animation that object should move up to be 0px from the top. At 60% into the animation, the object should move back down 20px from the top. By the time the animation gets to 100% it should move back to 0px from the top again. In the second rule we apply this animated behavior to the #ball element upon hover.
When the user hovers over the link with an id of ‘#ball” it will activate the bounce function. We have specified that the animation duration should last 4 seconds. Meaning that it will take 4 seconds for the animation to run from 0% to 100%. Finally we allow the animation to run infinitely. If we wanted the ball to only bounce a couple of times and then stop we would just put a 1 or 2 in the webkit-animation-iteration property.
TRANSFORM-ORIGIN: X Y
-webkit-transform-origin: x y;
This is an extremely important property for animation. The transform origin property allows you to change the point from which animation or transformation for any given object occurs.
Figure (a – Here you see the transform origin is in its default location in the center of the arm image (red circle). If we where to rotate the arm using this transform origin point. The arm would spin around from the center. Like the blades of a helicopter.
Figure (b – We have moved the transform origin point to the top, center of the arm image. Now if we rotate the image from this transformation point it would rotate correctly like a properly hinged arm.
Lets Move On to the AT-AT, Its Sections and the CSS3 Properties That Apply to Those Sections:
THE SHELL – one png image; keyframes and animated rotation properties are applied to coincide with the movement of the legs. The shell will sway a little as each leg steps forward.@-webkit-keyframes rotate-shell {
0% {-webkit-transform: rotate(0deg);}
20% {-webkit-transform: rotate(3deg);}
40% {-webkit-transform: rotate(0deg);}
50% {-webkit-transform: rotate(0deg);}
70% {-webkit-transform: rotate(-3deg);}
90% {-webkit-transform: rotate(0deg);}
100% {-webkit-transform: rotate(0deg);}
}
#atat #shell {
-webkit-animation-name: rotate-shell;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: infinite;
}
THE LEG (Thigh, Knee, Shin, Foot) – The leg animation is the crux of this whole experiment. The leg is comprised of a div with 3 child divs nested within it. Thigh, Shin, Knee and foot. The foot is a child of the shin div. The shin div is a child of the thigh div. Finally the thigh div is a child of the leg div. By nesting the divs in this manner, we can mimic the functionality of a skeleton.
In addition to nesting these divs, we moved the transform origin points from the center of the leg divs to the top, center. This allow us to create hinges or bones. As the leg div steps forward, the thigh div rotates x degrees on its transform origin point, rotating the shin and foot along with it. The shin already moving along the rotation point of the thigh begins its own rotation from its own transform origin point, rotating the foot along with it. The foot moving along the rotation path of the thigh AND the shin begins its own rotation cycle. This gives the legs that robotic, hinged look.
For each leg, the animation lasts 8 seconds. Since I needed only one leg to move at a time. I split the animation into four different parts. For the first leg the animation keyframe begins at 0% and ends at 25% (2 sec), the second leg begins its animation cycle at 25% and ends at 50%, the third leg begins at 50% and ends at 75% and the fourth begins at 75% and ends at 100%. By staggering the keyframe animation like this I was able to mimic the movement from the ‘Empire Strikes Back’ movie where the AT-AT’s are only moving one leg at a time.
(I’ll provide the CSS3 code for just one of the sections. All the leg sections move using the same strategy just different rotation values and timing.)
@-webkit-keyframes shin {
0% {-webkit-transform: rotate(0deg);}
20% {-webkit-transform: rotate(0deg);}
30% {-webkit-transform: rotate(23deg);}
50% {-webkit-transform: rotate(0deg);}
100% {-webkit-transform: rotate(0deg);}
}
#atat #leg-a .leg-shin {
-webkit-animation-name: shin-a;
-webkit-animation-duration: 7s;
-webkit-animation-iteration-count: infinite;
-webkit-transform-origin: 50% 0;}
THE HEAD (neck and skull) – The animation on this is minimal. The skull and neck extend out of the shell of the at-ats body. then the skull section swivels up and down a bit.@-webkit-keyframes rotate-head{
0%{-webkit-transform:rotate(0deg) translate(0px,0px);}
40%{-webkit-transform:rotate(10deg) translate(15px,5px);}
80%{-webkit-transform:rotate(-5deg) translate(8px,5px);}
100%{-webkit-transform:rotate(0deg) translate(0px,0px);}
}
#atat #head {
-webkit-animation-name: rotate-head;
-webkit-animation-duration: 7s;
-webkit-animation-iteration-count: infinite;
-webkit-transform-origin: 0 50%;
}
Well, that’s it. That is the basic concept to animating a diabolical war machine using only CSS3. Feel free to post a comment or question. I’ll make sure to try and post a response quickly. Take another look at the demo, dive into the code and try to build your own.
Related posts:
40 Comments
It would be more realistic if the background stop and go at the same rithm of AT-AT, isn’t it?
Very cool btw
Hi, You are absolutely correct. I just lost a little steam there towards the end and wanted to get it done.
-Anthony
In other words, this proof of concept does not meet his Star Wars fanboy standards! “Redo it @%&hole!”
wtf?
If you can’t tell the difference between “Very cool btw” and “Redo it @%&hole!”, then I feel bad for… well, everyone who you have even interacted with since birth.
Thanks Anthony, this was a great introduction to CSS3 animation – a practical example with sufficient complexity to be useful, but sufficient simplicity to be easy to follow through and a solid walkthrough.
On the verge of cutting edge. Way cool!
Wow. This is f’n brilliant.
Thanks for the tutorial! You’ve broke it down perfectly, thanks so much!
@Iain, @TraderZed – You’re welcome! I’m glad you found the article informative.
-Anthony
Neat. Made a few CSS animations myself using my Blender Export script. Automagically makes the required DIVs and CSS keyframes…
http://github.com/jamesu/csstransformexport
e.g. http://stuff.cuppadev.co.uk/walk.html
Thats cool. So let me get this right. You created the animation in Blender then just exported to html and CSS3? What if you wanted to incorporate background images?
For background images on elements, just set a texture and some UV coordinates. The texture will be exported as a background image. It will also be stretched and positioned in the element to closely match the UV coordinates.
Example: http://stuff.cuppadev.co.uk/csstransformexport/testImage.html
(Just imagine it fills the screen)
Keep in mind you can infinitely nest transforms in objects, so you can actually make a pretty complex scene (with camera movement even!) if you think a bit. For anything else, i suggest modifying the export script.
wow, thats pretty awesome. I’m definitely going to look into this. Thank you for sharing this with us James!
Just thought i’d let you know, i made a version of the AT-AT which was exported from my export script!
http://cuppadev.co.uk/wp-content/uploads/atat/atat.html
Enjoy
How come the Hoth background doesn’t scroll on my iPhone? It’s kind of funny, actually, because it makes the AT-AT look like Charlie Brown trying to work up the courage to talk to the little red-haired girl.
Awesome example Anthony. Thank you!
well that’s flash dead then (not).
Very cool, but I think you need to work on the walker’s “rhythm”, like how the different parts move when the legs do to make it more realistic. Plus, right now it kinda looks like a big metal chicken scratching the ground without the moving BG… ;D
Great example.
I really hope they come to their sense with all these hard to follow css syntaxes. It would be so much easier to work with this kind of stuff if they had a subset of real javascript that replaced CSS.
Come on w3 people. look at this:
@-webkit-keyframes shin {
0% {-webkit-transform: rotate(0deg);}
20% {-webkit-transform: rotate(0deg);}
30% {-webkit-transform: rotate(23deg);}
50% {-webkit-transform: rotate(0deg);}
100% {-webkit-transform: rotate(0deg);}
}
that’s soooo similar looking to what they write in JS. Might as well just replace css with a subset of js that doesn’t have access to anything that causes a security issues. Just let it focus on visual manipulation of dom elements.
Why doesn’t this work on my Palm Pre when it uses a webkit browser?
This was pretty flipping amazing to see! The animation comes off smoother looking, to me anyways, and didn’t cause my four year old MacBook Pro to heat up like a George Foreman Grill!
Ihear ya’
I found your demo from a post on the Web Designer Wall and I love it! Nice use of CSS3. I was wondering how you embedded the Hansolo font. Is that a CSS3 ability as well?
Hi, yes it is. Its the CSS3 @font-face property. (Super easy to embed any font you like)
-Anthony
this really is great.. as a graphic designer i cant begin to tell you how much i hate it when people want flash everything. with the exception of video i despise flash
So an animation that is more cpu heavy, and costs a client far more due to time taken to create, yet looks exactly the same as something done in flash, is ‘cool’ ..?
As a designer i cant begin to tell you how much i hate it when people want css everything even for stuff its rubbish at. *I* despise web standards bigots and their religious hate crusade against the right tool for the job
@Mark Grant – Uh-oh, Sounds you like have a grudge. My ’spidey-sense’ tells me you’ve invested a large part of your time and effort into flash, its cool Mark, let it go. You’ll be better off in the long run (unless you work for adobe).
-Anthony
Impressive stuff, Anthony, ground-breaking & inspiring too. That’s CSS3 higher up on the “to do” list now.
How many hours did you put into getting that done and, now that you’ve got it figured out, what’s the expected job time in the future?
I probably put an hour or two looking through the specs and reading through some css3 animation articles online. Maybe 8 -12 hours to figure things out, draw the at-at and adjust things… Trying to find a high quality image of the ipad was impossible, hence the blurry image.
If I had to bang out something similar to the at-at I could do it in about 2-3 hours now. The most important aspect for me was familiarizing myself with CSS3 transitions & transformations
It’s so slow and takes 100% of my proc
Yikes, what are your machine specs?
It is quite well explained tutorial. It helped me to understand advance techniques of CSS3. Great work!!!
Hi! that’s just really amazing.
I just wanna know if we could give random to those animation. Like that:
-webkit-transform: rotate(random)
Is it possible?
( excuse for my poor english, french are really dumb! )
That is a sick example! I like the fact you chose Star Wars as your subject matter
wow!!! that’s amazing!
I’m so inspired by all this lovely css3 stuff, the future of web design is going to be fantastic!
Ignorant question: Just curious, could you essentially do everything that flash could do? Could you use CSS 3 and Javascript together for games maybe?
absolutely. There are already a couple cool game engines out there. http://freshmeat.net/projects/gmp-javascript-game-engine and http://gamequery.onaluf.org/ are two of them.
I’ll have to agree with Mark Grant on this one. Flash could handle something like this better and on top of that would allow you to add sounds and randomness to the animation, be less cpu intensive, and work pretty much on all browsers and operating systems to boot. Just to watch this I had to install Safari…
With that out of the way, it’s pretty cool. Would be great for simple UI animations.
This isn’t an article advocating the use of hand coded css3 and html for animation OVER flash. Its about what is possible WITHOUT flash. If you want to debate what tool is better for animation on the web nowadays. I would argue that After Effects is the best tool. Its animation and effects tools are far superior to flash. And you can export it in an file format that will definitely play in iPhones and iPads. According to Steve Jobs swf’s crash OSX…
sigh….I wish I can be like u…have all the strength and time to fully concentrate on this subject…For now, I’m a broken down has been. Great work.
This is much better flash. But it is not the end of flash yet. There are a lot of software stacks that still suport flash. It will still take time. And other browser will need to apply the css3 standard.
13 Trackbacks
[...] Pure CSS3 Animated AT-AT Walker from Star Wars Via / CSS Globe [...]
[...] Who needs flash when CSS3 and WebKit browsers can do the animating? It's all explained here: Pure CSS3 Animated AT-AT Walker from Star Wars | Internet Marketing Blog __________________ twitter | [...]
[...] Prepare Your Troops for a Surface Attack Pure CSS3 Animated AT-AT Walker from Star Wars [...]
Pure CSS3 Animated AT-AT Walker from Star Wars…
As a huge Star Wars fan I couldn't resist not to publish this CSS3 trick….
More CSS Animations…
A few days ago i popped across Anthony Calzadillas “Pure CSS3 AT-AT Walker“, which is a great application of using CSS3 Transforms and Animations to create a scene of an AT-AT Walker walking along in a simulated iPad. Anthony explains in gr…
[...] HTML5 and CSS3 can do some pretty neat things. For cases such as modern, dynamic navigation and simple logo animation, it will soon make much [...]
Pure CSS3 Animated AT-AT Walker from Star Wars…
In this article we’ll quickly walk-through the process of creating a CSS3 animation of an AT-AT Walker from The Empire Strikes Back. We’ll start off by reviewing some CSS3 properties that made this animation possible. Then, follow up with a list of the…
[...] making of de cette animation est disponible sur le blog Optimum7.com et après étude de celui-ci, on peut se rendre compte qu’il n’y a rien de bien [...]
[...] AT-AT animated using ONLY CSS3 code. No Flash. No other fancy plugins. The creator talks about how he did it on the Optimum 7 blog. Pretty awesome and exciting [...]
[...] Rocks! http://blog.optimum7.com/anthony/website-design/pure-css3-animated-at-at-walker-from-star-wars-2.htm... [...]
[...] Animazione di un robot | TUTORIAL | [...]
[...] Via Mike, check out this pure CSS3 AT-AT walker (requires a Webkit browser like Safari or Chrome), and here’s how it’s done. [...]
[...] These programs will do some amazing things, integrated video tag that play movies, fluid css driven animation(only visible in Chrome or Safari), among others. However to take advantage of the future of the [...]