How should you express animations in a formal way?

With JavaScript? It’s been done for well over a decade. A thousand ways, and no end in sight.

The concept of codeless animation on the web isn’t new.

SMIL2 (HTML+TIME) in IE 5.5+ (summer 1999) was a good start, but the more I used it back when it came out, the more I wanted to just style some element animation without copying a dozen attributes every time.

Which looks more natural?

.clickme {background-color: #000; }
.clickme:hover { transition: background-color 1s linear #00f; }

Click here

or

Click here

$(‘.clickme’).style.backgroundColor.animate(“#000″, “#0F0”, “hover”, 0, 100);

(apologies for the pidgin jQuery and css anim — it would look something like that though)

One more thing — if tied to JS, you cannot guarantee when an animation starts/stops, how it’s supposed to degrade when there’s 1000 animated elements. Stopping on a JS error somewhere else, etc.

We already have the mess of that!