3

Well I am looking for a complete definitive CSS3 Animation spec so that I am limited by those mentioned in tutorials for Dummies. Whenever I search the internet I only come across various tutorials and guides.

I am looking for the authentic CSS3 animations specification document used by WebKit and Mozilla for their implementations which covers all the possibilities in their browsers.

What I understand is that Mozilla and WebKit have their own tags and the standard is still not accepted, so maybe they have their own documents. Any pointers to the authentic documentation?

Paul D. Waite
  • 96,640
  • 56
  • 199
  • 270
Raks
  • 1,723
  • 3
  • 18
  • 26
  • For e.g which spec mentions about 'spin' and transforms that can be be done. I have already seen http://www.w3.org/TR/2009/WD-css3-transitions-20091201/ and http://dev.w3.org/csswg/css3-animations/ but nowhere it mentions about transforms and the spin animation – Raks Oct 21 '11 at 05:18
  • transforms aren’t animations. – Paul D. Waite Oct 21 '11 at 09:41

2 Answers2

3

Mozilla transitions

WebKit transitions

WebKit animation

Edit: as per your comment asking about transforms:

Mozilla transforms

WebKit Transforms

Paul D. Waite
  • 96,640
  • 56
  • 199
  • 270
2

Transitions specification:

Animations specification

All the other links posted above (e.g. MDN links, Webkit blog links) are NOT specifications, but more like tutorials.

Lea Verou
  • 23,618
  • 9
  • 46
  • 48
  • sure, but the OP was asking for the document used by WebKit and Mozilla for their implementations. Until the standards are standardised and followed by the browsers, their own documentation is the closest we have. – Paul D. Waite Oct 22 '11 at 10:20
  • 1
    Not really. If Moz and Webkit do something that's opposed to the above W3 specs, you can report it to them as a bug and they will accept and fix it, even if the spec is still in WD. – Lea Verou Oct 22 '11 at 15:18
  • really? Don’t specs ever change during the working draft stage? – Paul D. Waite Oct 23 '11 at 19:39
  • Yes, that's why implementations are prefixed, because they change as the specs develop. – Lea Verou Oct 24 '11 at 13:22
  • right, but they don’t usually flip-flop around that much, do they? For example, when the WebKit team changed their gradient syntax to match Mozilla’s and the spec better, they kept their existing syntax (see http://www.webkit.org/blog/1424/css3-gradients/). the strategy for matching implementation with spec seems to be to wait until the spec’s agreed with other browser-makers, then implement without the prefix. – Paul D. Waite Oct 24 '11 at 13:41
  • Changing an implementation is hard work. Also, when it's a widespread feature, existing websites might break so the change must be performed in the most backwards-compatible way possible. This is why sometimes browsers wait. Btw that gradient syntax isn't "Mozilla's", Mozilla was just the first to implement it. Originally, in FF3.6 Alpha 1 they had implemented something exactly like -webkit-gradient with only different function names, got lots of criticism, so they changed it in FF3.6 Alpha 2 to match the (then new) spec. – Lea Verou Oct 24 '11 at 16:31
  • well, indeed. So as such, until the spec actually does get implemented in a shipping browser, the documentation from the browser-makers is the best we’ve got. – Paul D. Waite Oct 24 '11 at 17:10
  • That’s interesting re the gradient syntax. Question: if they were the first to implement it, in what way is it not theirs? Did they not update the standard with the new syntax? Was it the chap from Google who co-authored the standard? – Paul D. Waite Oct 24 '11 at 17:13
  • Your first comment doesn’t really make much sense (or I can’t parse it). If there is no implementation, then what are the browser makers documenting? The spec? Well, then read the spec. As for the second comment, it’s not theirs because it was authored by the CSS WG. Sure, some of them are Moz people, but not all (especially Tab (the editor of that spec) works for Google). – Lea Verou Oct 26 '11 at 09:08
  • re my first comment, WebKit’s implementation of CSS Transitions came before the W3C spec. (I think.) Re my second comment, I meant “theirs” in the loose sense of “someone from Mozilla designed the syntax”. I’ve no idea if that’s actually true though. – Paul D. Waite Oct 26 '11 at 10:12
  • (Source for the timings: 2007-10-31, WebKit blog post about transitions: http://www.webkit.org/blog/138/css-animation/; 2009-03-20, first listed draft of W3C Transitions spec: http://www.w3.org/Style/CSS/specs#transitions.) – Paul D. Waite Oct 26 '11 at 10:14
  • About transitions: Still, when for example I reported an inconsistency of `cubic-bezier()` with the spec, it was fixed. And when `steps()` was added to the spec, it was added in Webkit too. Implementations try to follow the spec as closely as possible. As for gradients, like I said, the main editor of the spec (Tab Atkins), is a Google guy. But that doesn’t mean Google made it either, it’s a collective effort more than anything. – Lea Verou Oct 26 '11 at 16:01
  • sure, I see your point. WebKit’s documentation was [updated with the `steps()` function](http://developer.apple.com/library/safari/#documentation/appleapplications/reference/SafariCSSRef/Articles/Functions.html#//apple_ref/css/func/steps) too though. My point is really that the latest shipping version of each browser may follow the spec, but if you’ve got to deal with older browser versions, you need documentation from the browser-makers. – Paul D. Waite Oct 26 '11 at 16:27