Re: transitions vs. animations

Tab Atkins Jr. wrote:

 > > .button {
 > >    color: blue;
 > > }
 > >
 > > .button:hover {
 > >   color: red;
 > >   effect: on-entry change(color, 1s), on-exit change(color, 1s);
 > > }
 > >
 > > .button:focus {
 > >   color: green;
 > >   effect: on-entry change(color, 1s), on-exit change(color, 1s);
 > > }
 > >
 > > So, the button will start off being blue. Let's say the element first
 > > is hovered (and turns red), and then is focused (and turns green).
 > > This is given by the normal cascading rules in CSS.
 > 
 > That's a lot of repetition, and it still doesn't cover all cases
 > (.button[disabled] turning color:gray?).  All I want to have to do is
 > say "Hey, you, button.  Always transition your color.".  Your proposal
 > would require me to specify an on-entry and on-exit for *every single
 > state* that changes the color of the button.  Transitions handle that
 > use-case with a single simple property on ".button".

The same will work in this proposal:

  .button {
     effect: on-entry change(color, 1s), on-exit change(color, 1s);
  }

We could event find a shorthand for "both on-entry and on-exit". E.g.:

  .button {
     effect: change(color, 1s); 
  }

And even drop the functional notation:

  .button { effect: color 1s }

I agree with you that we need to look at common use cases and compare
syntax.

-h&kon
              Håkon Wium Lie                          CTO °þe®ª
howcome@opera.com                  http://people.opera.com/howcome

Received on Monday, 5 April 2010 20:45:10 UTC