CSS Animation
Tagged with: experiment, css
Shamelessly falling behind the times, a good friend of mine pointed out to me that FireFox 5 introduced CSS animation to the Mozilla framework. And with webkit already supporting this awesome tech, I couldn't let this go by without creating a tech-demo
Animation 101
The big question is of course, what will I animate?!? So I started by looking through google for some 8-bit sprites to animate around with. Perhaps not the most real-world applicable examples, but I've been dying to play around with something like this :)
Well, that was not what I meant to do, but that's because I was being an idiot!! Although it perfectly show what can be done on background, I suppose, there is the small disadvantage that it always 'smoothly' rolls back to the start?
Testing to see if I can cheat my way out of smooth transitions!!
Combining the cheated sprite with the moving floor
And now something interactive :) Click on the worm to make it jump! From the CSS-animations perspective, this is a cool demo because it uses 'animation-direction' set to 'alternate' in which it runs every other cycle in reverse order. In case of this jump the cycle only describes jumping up, the alternate reverse cycle simply reverses going up...
Conclusion
Using sprites with key-frames isn't what animations were meant for. Essentially CSS3 animation is the next step in transitions, this time with more programmable steps. So for a series of transitions CSS animationis an awesome solution, for html5-games we still have to cheat, or use javascript, although I intend to test a few alternate methods before giving up!
FireFox 5 goes into play as the second major browser with support for animation. Since all animation types I've tested so far work without diffirentiation, I'm quite happy. There are clouds in the sky though, for some unfathomable reason FF does not support the short-hand notation, forcing me to write the animation in separate properties for mozilla, which easily goes up to 4 or 5 lines of CSS-code, where a single line would have done...
Download Video: Closed Format: "MP4" Open Format: "WebM" 3rd party: "YouTube"