Just yesterday I was making a music player position bar, and using CSS transitions to have it smoothely update itself. Set the duration of the transition and it goes on.
But what about when the transition takes effect? JS doesn't know when a style is actually updated and can then have a new property overwriting it to make the transition happen. If you do properties too quickly the transition won't happen. Such as if a user clicks on the bar to change the position, I have to hack in a 100ms setTimeout to set the new transition duration after stopping the transition with transition:none;
Why can't I control a transitions location? Chrome's animation viewer can go back and forth in time easily.
Why isn't interactivity seperate from CSS? CSS elements cannot effect those outside of its scope. You require JS for just dumb simple things that should be natively supportable. For instance you can make CSS do things based upon URL hash names like #somename, but you can't set them in CSS. You can't change attributes on elements, or classes or anything like that.
I think we've gotten to the point where JS is the 'programming language' of a webpage that has intentions far beyond rendering and interactivity. Perhaps we need a newer kind of CSS that's made for dynamic interactions. That way great UI's can be built in a safer css-like environment.