CSS Animations in Safari
Safari is building in CSS animations. That's right. With a little bit of CSS, you'll be able to animate obects on the page. The transitions are built using a number of CSS declarations for declaring what properties should change, for how long, and even being able to transform the object like rotations.
Animation is behaviour. You're telling your elements how to behave. Move this way, disappear, turn around. Good element. Here's a biscuit.
This gap has already happened with pseudo-elements. Try getting the correct style of a
span that happens to get styled by a
And what of accessibility? While I'm no accessibility guru, I can only imagine the headaches this'll introduce in accessibilty circles.
Extend the DOM
Now, I can see why they thought this was a good idea. CSS makes it really easy to extend without getting in anybody's way and risk incompatibility. Just add a
-webkit prefix and go to town. But the DOM is flexible, too, and would have made it easier to create a cross-browser solution. In fact, I'd love to see the ability to rotate elements like Safari demonstrates.
Imagine if there was an animate or rotate method on elements?
// (property, start, end, duration) document.getElementById('elementId').animate('opacity', .5, 1, 2000); document.getElementById('elementId').transform('rotate', -90, 4000);
At least then all we'd have to do is check if the animate or transform methods existed before overwriting them with our own specifications. You can't do that with CSS.
Of course, Safari isn't the first one to try this. Microsoft has something similar that they came up with in 1999 called HTML+TIME and was even based on standards. Luckily, that didn't catch on either.
All doom and gloom?
There are potential uses for this such as prototyping. It'd make things easier to just drop in a couple extra CSS declarations to demonstrate a potential interaction to a client.
And, as some people suspect, this could be intended for use on the Apple iPhone, enabling developers to include simple animations .
Don't jump on the bandwagon