Animation in CSS3 – animation property
While knowing HTML5 I could not miss CSS3. I’m already using properties like border-radius or box-shadow but while going through others I was curious about animation. Especially when there is bold statement that it “can replace animated images, Flash animations, and JavaScripts”
Of course right now only Firefox, Chrome and Safari supports it and I don’t think that anyone will be suprised that you have to add -moz- or -webkit- vendor prefix.
Web developer’s life is too easy ;o) Not so long time ago there was IE and the rest of the world. Now you have to write CSS3 code almost for every browser. And I know that until CSS3 is “experimental” every browser can implement new properties in diffrent ways etc etc, but c’mon! ;o)
Animation property
Syntax for animation property is very well documented in CSS3 reference at w3schools. I just want to point that core of animation is in @keyframes. This is the place where we create animation, by changing styles in various stages of animation.
When I learned about animation, I created a simple animation available here:
CSS3 animation with a little bit of JS
To watch it you need to open this link in newest Firefox, Chrome or Safari. The best choice will be Chrome, because one of the animation is using perspective property. Which is not yet implemented in Firefox and Safari does not handle it very well when parent div was hidden just before ;o).
What I mean by `little bit of JS`?
First, I used JS (jQuery to be precise) to add some interactions to the animation. But all of them (except two) are triggered by assigning keyframes name from CSS file.
Second of all, you can’t apply two diffrents animations for the same object, even if they should happen at the same time. You can do it by nesting divs but controling it (when, what should happen) is not easy. Especially when start time of each frame is given in percent and duration of animation in seconds. I had two cases like that in my animation.
- Big eyed monster at the top. When you click it, it starts rotate. I wanted to move him through the page at the same time. It’s two diffrent actions at the timeline for the same object. At the end I wanted to execute the very first animation (the one before click). Because at the moment you can assign only one @keyframes to object at the same time, rotation of the monster is in CSS3 and movement is created by animate() function from jQuery.
- I had same problem with monster from the bottom. The one which is obviously hungry. Up and down animation is in CSS3, but movement to the right is in jQuery.
I’m not saying it was impossible to create two animations for “one” object (with nested divs). It was easier for me to mixed it with jQuery.
And last, I had to change some initial properties to hide elements at the beginning with JS. Why? Beacuse some animations starts in diffrent places than they begins. When the animation stops (if it’s not set to infinite) they return to initial styles. So if I have monster who is emerging from nothingness with a delay, he is visible until the animation start. I can’t hide him in CSS because again, when animation stops he will not be displayed.
Conclusion
CSS3 animation is very similar to what jQuery offers with animate(). Just without JS.
But in this form, animation fits only for really simple animation. Seriuosly, really simple. If we want to animate many objects, it’s really hard to controll everything what going on, and when it should go.
I would love to see a property for animation like: “Stay with that with what you finished”. Mainly for animations with delay. UPDATE: and there is something called animation-fill-mode.
It would be nice to have possibility to create many @keyframes and then pointing in what order they should be triggered. That way more complicate animation we could create from few simple. Also in addition to the percent values would be nice to have seconds – better control with more complex animations.
It reminds me of flash begining. Just instead of clicking, moving, rotating you need to code every action. Although if we adopt animations in CSS3 there will be applications or tools where we will be clicking and moving, and where as a result we will get CSS3 code. I’ll bet that Flash will also have an option like that. But I don’t think that, it will be soon.