<Glazblog/>

I started working on an editing tool for CSS 3 Animations inside BlueGriffon. And I discovered that editing Animations is hard. Just like the rest of CSS, eh :-) Animations are powerful but hard to edit in the general case.

Case 1

We have a html document with one @keyframes myAnim1 { ... } rule. When the user clicks on a given element, another element acquires through JavaScript an animation-name, an animation-duration and an animation-delay. In other terms, an editing environment opening that html document cannot determine from the document instance the animation myAnim1 can be attached to the element, when it should start and how long it will last.

Case 2

The document contains the @keyframes myAnim1 { ... } rule but myAnim1 is used through animation-name by two selectors targeting two different elements in the stylesheet. The corresponding animation-duration and animation-delay differ. Then the keyframes' set myAnim1 must be represented twice on a timeline, and the key here is clearly the selector.

Case 3

The Web developer is a JavaScript zealot and all animations are launched and chained through JavaScript instead of using a single class on a single element,  descendant combinators and animation-delay. Then it's impossible to present a  timeline of all animations showing when they will start and end, proposing a global vision of the animations' set of the document.

Conclusion

Because of the above, a single timeline for all animations living inside a document is impossible in the most general case. I mean, if you take an arbitrary Web document retrieved from an arbitrary Web site using Animations, it's very unlikely that you'll be able to edit these animations using an editor showing a single-timeline view.

Sencha Animator shows a single timeline and that's why it is unable to deal with an arbitrary Web page. Adobe Edge is a worse case since it deals with Animations only through a huge JavaScript library... Launch Edge, make an animation, export the document, look at the CSS : it's empty.

So my editor will have two views, one for the keyframes' sets, one for the selectors and the animation properties. It's a little more complicated (although I'm not really sure about that) but it will allow you to edit all your CSS 3 Animations. Unless you used Edge and its ugly JS-based design, of course ;-)

Click to enlarge