Update: 10/11/2011 New Animation; Making Internet Marketing Fun with Wufoo and CSS3
Dont have CSS3 animation capable browsers? Watch a video of the animation.
Inspiration
Searching YouTube for inspiration I stumbled on to the intro of the classic 1967 spider-man cartoon series. While watching I realized that the animation was very basic. It was the paper doll sort of animation that lends itself perfectly to css3. Hmmm… “I could something like that with a little css3″, I thought.
Character & background art
CSS3-MAN
The character art was created in adobe illustrator and copy/pasted into photoshop for export. When designing a character for animation. Carefully plan all the pieces that will compose your character. I decided on simple shapes and built each part of the body separately, like a marionette. This allowed me to re-use some graphics. By building the character like a marionette. I was able to simplify the animation process.
As previously stated, the graphics originated in illustrator. Vectors paths and points make it simple to adjust the artwork. For instance, If you need spidey looking up or down. Simply adjust the position of the eyes and webbing on the head shape to complete the illusion. You can clean up any extra lines by simply moving the point or deleting it.
Same applies for the torso, legs and arms. By adjusting the orientation of the chest design and belt we can fake the rotation of a 2d element. Moving the arms and/or legs a little behind and a little in front of the torso creates the illusion of a subtle 3rd dimension.
BACKGROUND
The cityscape’s were also created in illustrator. But they started as plain screen-grabs. I captured certain parts of the video as it played. Then pasted them into illustrator. I created another layer above the screen-grab. Drawing paths over the screen-grabs images. Using it like tracing paper. When graphics were done, I trashed the screen-grab layer.
Just like the character. When creating these cityscape graphics you must think a little in advance about how the pieces must fit together. Background images used for scrolling and zooming should be 2 or 3 times wider and/or taller to allow for panning left, right, up, or down. The same applies for zooming in and out. Now we have our finished character and background graphics. We can begin setting up our graphics for animation.
Complex CSS3 character animation and rigging
CHARACTER RIGGING
One of the trickiest parts to creating these css3 character animations is the rigging of joints or skeleton so that they hinge and rotate believably. The most important property is the transform-origin property. The transform-origin property uses x,y coordinates to determine the point from which animation or transformations occur. (If you want a full explanation of css3 animation properties please read my last article.) In order to determine the accurate transform-origin point for our arm and leg graphics we’re going to use a simple trick.
Notice how the foot graphic (1) is much wider than the thigh graphic (2). It would be impossible to match up the transform-origin point on these two pieces.
However, If we match the width of the thigh (2) with the width of the foot (1)… That’s it! By increasing the width of the canvas area of the thigh to match the width of the foot we can accurately match the rotation points of these “hinges” using the css3 transform-origin property. By giving the thigh image a wider canvas area we can move the thigh graphic left or right to line it up with the foot graphic.
We can now ascertain that these two pieces will have the exact rotation points via css3 transform origin. By setting the transform-origin for foot to (x) number of pixels from the left we can guarantee that the foot will rotate from exactly where the bottom of the shin is located.
Now we can apply the same transform origin coordinates to the top of the leg div (which wraps around thigh & foot). By rotating the leg div we rotate its children too. This means that the leg div rotates both the thigh and foot graphics at the same time. Mimicking the functionality of a skeleton. Which allows us to have the foot moving along its own rotation path while also rotating along the path of the whole leg. Its important to nest items because this allows you to have multiple animation paths without having to recalculate their position constantly. If I rotate the thigh and foot without first wrapping them in a leg div how would I also make the foot rotate upon the axis of the leg? It would be near to impossible. And it would look horrible. By nesting and breaking down the animations into their major body parts and just animating one major body part at a time and utilizing the animation of children I can achieve complex (for css) animation combinations. Creating the illusion of the character zooming in required that the images be created at a bigger size. Then implementing them into the html mark-up at a smaller size. There are two ways to do this. Using the scale transform property or using the image width property. By increasing the image width over a key-framed animation you give it the illusion of growing or zooming into the screen. We can make a 500 pixel wide image then insert it into the html at 5% of its size. We are then able to make it smaller or bigger by increasing the height or width via css3.
Complex Character Animation
When building a character composed of precisely placed elements. Being able to visually construct the character is essential. When we first place all the different pieces for our character into the html. They are all jumbled up together. Firefox 3.x has implemented css3 moz-transform-origin and moz-rotate. Which means I can use firebug developer tool to visually position the character’s body parts where they belong. This makes setting up the start and end positions/rotations for the characters pose simple. To begin, we set up the characters body parts in the start position. I just adjust the values to where I need them in order to get the proper first position. I visually adjust the rotation and position values of the graphic using firebug.
This allows me to gain pixel perfect precision over where I want the graphic placed. Using firebug like this takes the guesswork out of animating something as technical as different body parts. I just visually adjust the values to where I need them to get the proper first position. We then place those coordinates into the css. Now we have to figure out the end positions for our animation. We use the same technique. Adjusting the values to accommodate the end position and plug those values into the css as well. Finally, I place these values in the ‘start’ and ‘end’ parts of the css3 keyframe function. Then we check the animation in webkit. Webkit does the rest of the magic on its own. By using firefox and chrome together I was able to find the start and end points to each body part and then allow @keyframes to fill in the blanks.
Putting it all together
Believe it or not, the biggest road block I encountered when creating this css3 cartoon was switching the scenes at the correct moment to coincide with the css3 animation. I used jquery’s built in delay function to flip through the scenes and activate the next scene. As I’m writing this I realize that I probably could have pulled off the scene switching with css3 animation as well. But I’m not sure – as I haven’t thought it all the way through. We used the built in animation delay function on css3 to begin animating the scenes just as they were activated by jQuery. Another challenge I had was that I had no control over when the animation started. I had to preload all the elements. Because there was no way to start all of the animations on just one click throughout the entire flick. And if all the elements are not loaded when the animations start running it gets jumpy. Including the audio soundtrack was almost too easy. I just inserted a simple html 5 audio tag. (Gosh, I’m falling for html 5). Anthony Calzadilla is a real cool dude at Optimum7.com
Optimum7.com © 2010 All Rights Reserved.
October 11, 2011
185 Comments
Hi,
I was wondering.. Is there a way of disabling a CSS3 animation If I don’t want to see it ?
Thanks
What the dolts who think “death to Flash” don’t know is that Flash does much, much more than animation. In fact, though it’s seed was in Future Splash which rendered vectors, I would go so far as to say that animation is its second most used feature with interactivity being the first.
AS3 is object-oriented. Unless a massive overhaul of the actual browser concept, let alone version x of browser y is tackled, is the fact why Flash will never be replaced by HTMLvwhatever and Jquery.
All I’m doing currently is using HTML, CSS and Jquery and I work for a very large investment company. But, my past is filled with Flash work and I’m sure in the future there will be more.
The right tool for the right job. This was a great demonstration/proof concept… that is all.
quite impressive, thank you for your blog, I am very interested in rotating the image
If you could create it from scratch in Flash in an hour, it’s because you’ve used Flash many, many times before. This is the first time something like this has been done, so don’t try to compare the two. It represents the possibility that complex animation can be done without a $700 program AND a browser plugin. I understand people who have taken the time to learn Actionscript will be upset that there could be an Open future with options other than Flash, but things evolve. Put that energy toward learning a new language or just get the most out of Flash while you can, I’m sure it will never go away completely. Either way, please stop whining.
Personally, knowing Actionscript myself, I hope it gets replaced with a more organized language. 8 lines of code to put a link on a button is just unnecessary.
Anyway, really excellent work! Truly inspiring.
HTML5 and CSS3 has come a long way, have a look at what can be done with 3D CSS:
http://www.youtube.com/watch?v=SThowUvqibw
WOW no flash, thats pretty impressive. I’d like using flash but just jquery now as so many clients have iPhones and I was tired of hearing “there is a box on my website” an image fall back just didn’t cut it! The future looks bright in a flash free world…
Great proof of concept.
The door is open for the next tool/framework that would help in creating animations in html5.
Don’t be surprised if Adobe will later give you the option of exporting (simple) animations in html5. Remember, at the speed things change in web development it is impossible to make any predictions.
Now make a business plan!
God, that was dreadful.
awesome work!! just started learning HTML5 ..
You do realize that since you used a lot of jQuery to control the animation it kind of defeats the whole “Pure CSS3″ part of it, right? For it to be “pure CSS3″ you would need to not use the jQuery at all and just use – gasp – CSS3.
Those proclaiming the death of Flash miss the most crucial reality checks here in 2011:
1.) using Flash creates the animation FASTER = saves the client MONEY.
2.) more end user’s browsers have the Flash player than support HTML5
I’ve noticed that css3 animations of larger jpg images (450px wide) in a diagonal direction (transitions of top and left with absolute position) produce very jerky movement on an ipad, where it looks fine on a desktop in Safari. Anyone else notice this? Is there a solution? I’ve done the exact same animation in Flash and it looks a LOT better, so I don’t quite understand why flash is so bad.
Unfortunately the reality for 2011 is that flash is on its way out for web based development. I’m not sure wjere flash fits in as jquery and other newer technologies are making flash obsolete.
Sorry :/
Hi Dave,
Yes avoid using positioning values for animation. so instead of using absolute position values to move your object around, you want to use the translate3d(x,y,z) syntax, this triggers the built-in hardware acceleration in iOS devices http://mir.aculo.us/2010/06/04/making-an-ipad-html5-app-making-it-really-fast/
That’s nonsensical. How would I not realize that?
The purpose was defeated for YOU when YOU got hung-up on small technicalities.
jQuery is used simply to switch the scenes
If you are trying to make the statement that this can overtake flash I would say “you have to be kidding right”. I have worked since 1998 in flash with quite a number of projects along with MANY other languages. I am presently working in 5, jquery, and css. Flash is as powerful as it gets on the front end with its OOP technology not to mention its ability to produce movie like motion graphics. I find it insulting to think that there are people actually purporting that these 3 technologies have what it takes. As someone mentioned in this post “the right tool for the right job”. While these 3 can do some things, they fall incredibly short of actually producing an RIA. I have seen this type of posturing before when some group has an agenda they want to push, they fabricate claims and get a following of people who dont know any better or also have a wish list they want fulfilled. It is just this kind of bickering that holds up progress of the web. a few months ago Steve Jobs made a claim about flash being an energy sucker on the IPHONE and problematic in other areas. People bought in to the hype. Along comes the Android platform and debunks his statement. Jobs would not allow flash developers the ability to tap into the OS and so he hamstrung any possibility of flash developers improving certain aspects of a program. Oh and did anyone give thought to Apple being the pusher for 5 technology? He wants to take marketshare from Adobe and get more people on to his proprietary app store. 5 has its place and so does Flash. Lets get on with it!
hi,
please don’t talk foolishly i am developer of both jquery and flash and believe or not nothing can beat flash in next 10 years almost.
thanks
Hmm… I hate moron ppl who doesn’t even know what animation is. U need a complete and robust interface and a set of tools to make your life easier as animator or game programming. Do you know how hard is to make anything with jquery css alone? Is a pain in the butt, we live in the real world and there are deadlines that we must adopt to survive and stay in the market. Adobe has evolved so much to fit the market needs. Adobe just can make a feature to export to HTML, css3 and the problem is solved.
I think its excellent. And I`ve posted it on my web for HTML5 reference
First of all wonderful work. I do agree that Flash is in the past already, those that refuse to understand it are just pathetic.
However I think this is not about that, it’s just a very smart way to exemplify how we should always broaden our horizons and that for each project there is a solution and no single solution fits all. I still remember when some so called web designers would create full flash websites ARGHHHH!
superb .. CSS3 Rocks
Are you serious?? 1.7MB for that? Flash could do it in a fraction of that, and the graphics wouldn’t be blurry and jaggy, and the motion would be smoother. This is not progress.
FireFox 5 supports the animations as well.
Thanks! Animation has been updated to support Firefox 5
Seems the animation on FireFox isn’t all that great. Very jumpy and skippy. Oh well, here’s hoping to FireFox 6.
Very Impressive. Will this feature eb avialable in Firefox and internet explorer ?
I’m sorry, but… This is ugly. Really ugly.
Alternative? Sure. Replacement? Not a chance.
Its just using assets from other programs and tweening without Flash. This does not replace Flash when it comes to the power and capabilities Flash has. Mathematical animation may be smart but you’re blocking out the side which has been the skin and meat of the internet for all these years.
Tween is not the future.
I really impressed by your work. Today i visited your website after reading one ebook about html5 gaming. Your website i excellent . Thanks for sharing these tutorials…..
Many who argue about HTML5 being inferior to Flash are concerned about the investment both in knowledge and the application. This happens to everyone in any job. When a new technology makes your existing skill set less valuable or less “critical” to producing a product or service you are inclined to find problems with the “new bad thing”. From robots building cars to desktop publishing.
I saw this happen in the print industry. When desktop publishing was just starting out, the businesses who had to do offset printing from computer files fought print designers like myself tooth and nail. They blocked us at every step. They said computer files were inferior, that the knowledge they had was far superior and that the computer could never handle “trapping” or full color separations using traditional analog photographic film processes. Keep in mind the people who did this stuff spent years learning those skills. They were right. It was a priceless skill gained over years of experience.
Needless to say, the print shops who refused to accept our computer generated files or printing films failed because they didn’t or couldn’t afford to invest in the equipment and knowledge needed to support the new technology. I saw many of these shops close down very quickly because they couldn’t compete.
Flash is still “better” or “faster” than HTML5… right now… but… uh… wake up and smell the coffee! A very short time ago HTML5 DIDN’T EXIST. Most browsers didn’t support ANY HTML5 features and barely supported most of the HTML 3 or 4 specs consistently or at all.
HTML 5 has come so far so fast and will only improve. The writing is on the wall. Flash is not the only kid on the block. HTML5 is the new younger kid with some cool tricks that is going to steal Flash’s job.
I woke up and smelled the coffee ages ago. I’ve never been a supporter or AOL, Microsoft, Apple, and certainly not Adobe. Does this mean I boycott their products? No. Does this make me a hipocrit? No.
I have watched Adobe grow over the years as they have added many things good and bad to their products. Suffice it to say, they have spent way too much time on seizing the market and cornering the stupid people in a corner. They should have spent more time on enhancing and correcting flaws in their products. Work with the community and people will be more accepting.
Those of you arguing that Flash is where it is at for animation, unfortunately; are right. But as time goes on, the masses of people you so vehemently hate and despise will push on. Open source developers, small & large corporations, and headstrong standards based committee members – all are aware of what is desired for the future and will work towards new technologies regardless of what you or Adobe wants.
This demonstration of a concept shows us something that was impossible just a few years ago. Adobe needs to wake up; fix your products, improve your pricing, adopt what the community wants or they will fold up like the 35mm print shops have done.
This is not a Walmart market and you would be well served to be part of the solution instead of the problem and adopt new methodologies where ever possible.
It is your job and duty to provide a well balanced design for your clients and their visitors which flash cannot do 100%. Regardless of cost and schedule, as you become more proficient with HTML5, css3, or any other newer technology as it comes along, you are keeping yourself marketable and uniquely skilled to solve a myriad of problems a customer may pose. Do not make yourself a slave to Adobe because you are afflicted with the lazy mentality that it i good enough. You know it is not.
As everybody knows, the world is evolving and more and more EVERYDAY PEOPLE (NON DESIGNERS or DEVELOPERS) are actually turning to their mobile devices to perform everyday tasks, hence the obvious need for HTML5 and CSS3 based code. HTML5/CSS3 can be viewed on all most all platforms, mobile and desktop…… can FLASH????? pft NOPE!!!!
Remember your developing for Everyday people not tech Savy ” Know It All’s ”
Great example mate! Spiderman is the #hit
Seems like we are going backwards, this is a bad animation and whether flash is in or out its gonna take something better than this to convince me of future technology.
All those people who think animation done in Flash cannot be done in HTML5, please upload their animation in youtube and provide me the link, I will give you back the same animation in HTML5
Genius.
I clicked “post comment” after commenting with a single word “Genius” as you see above this line.
I was informed that the comment was “too short” and was also asked to revisit this page to make a longer comment.
I think by now my comment should be considered as acceptably “long” or longer than my earlier rejected post
Yes, you are a creative genius.