5 ms·

That is really awesome - but one thing (which is just an observation, not a complaint) I've noticed with all the CSS3 super-cool demos like this is that everyth

That is really awesome - but one thing (which is just an observation, not a complaint) I've noticed with all the CSS3 super-cool demos like this is that everything is very "linear". All the animation stuff happens in straight lines or repeating patterns (of circles, in the demo) which gives the page a certain feel. I wonder if it's the start of an effect that will eventually be used to carbon-date websites... "Ah look at this specimen - table based layout, and JavaScript littered with variable names beginning with "mm_" from the late Dreamweaver era. Oooh, now look here... completely linear animations... my guess is it's early 2011! And in such condition!"

Groxx 16y ago
That's interesting... I don't know if it's possible to animate directly on a bezier curve, though that'd be an extremely-useful thing to be able to do. It looks like all the animatable properties just have ease-in / out timing, and go from A to B. Given that, the best you could do is animate each X/Y direction's behavior, creating a new animation at each bezier curve point, and using the bezier form of the timing function to mimic curved paths. https://developer.mozilla.org/en/css/css_transitions https://developer.mozilla.org/en/css/css_transitions and https://developer.mozilla.org/en/css/css_transitions https://developer.mozilla.org/en/css/css_transitions
- bzbarsky 16y ago
  The timing function can be an arbitrary cubic bezier; some common ones like ease-in/out and so forth have dedicated keywords. You should be able to get arbitrary bezier paths if you pick your x and y timing beziers carefully, I'd think... But it does take some thinking.
arnorhs 16y ago
Not all the transitions are linear. In the cases where they are, it's obviously a design choice. It might be that because they're moving fast that you perceive it that way. But most of the animations have easing. Ease in and out on almost all the animation styles. http://mozillademos.org/demos/planetarium/css/style.css http://mozillademos.org/demos/planetarium/css/style.css

Groxx 16y ago

That's interesting... I don't know if it's possible to animate directly on a bezier curve, though that'd be an extremely-useful thing to be able to do. It looks like all the animatable properties just have ease-in / out timing, and go from A to B. Given that, the best you could do is animate each X/Y direction's behavior, creating a new animation at each bezier curve point, and using the bezier form of the timing function to mimic curved paths. https://developer.mozilla.org/en/css/css_transitions https://developer.mozilla.org/en/css/css_transitions and https://developer.mozilla.org/en/css/css_transitions https://developer.mozilla.org/en/css/css_transitions

bzbarsky 16y ago
The timing function can be an arbitrary cubic bezier; some common ones like ease-in/out and so forth have dedicated keywords. You should be able to get arbitrary bezier paths if you pick your x and y timing beziers carefully, I'd think... But it does take some thinking.

arnorhs 16y ago

Not all the transitions are linear. In the cases where they are, it's obviously a design choice. It might be that because they're moving fast that you perceive it that way. But most of the animations have easing. Ease in and out on almost all the animation styles. http://mozillademos.org/demos/planetarium/css/style.css http://mozillademos.org/demos/planetarium/css/style.css