Re: transitions vs. animations

Also sprach Anne van Kesteren:

 > > [example 3]
 > >
 > >   .blue-box:hover {
 > >     effect: on-entry bounce 1s, on-exit bounce 1s;
 > >   }
 > >
 > > The above uses two new keywords: 'on-entry', 'on-exit'. These are
 > > values on the 'effect-delay' property. That is, 'on-entry' is equal to
 > > 0 in the current draft so that the animation starts immediately when
 > > hovering occurs. The 'on-exit' keyword has no numeric equivalent, but
 > > is interpreted to mean that the delay should last until un-hovering
 > > occurs. In both cases, the effect will last for one second.
 > 
 > I think the problem is that this proposal assumes an element can only be  
 > in one state. What if an element just matches :hover at first, but then  
 > also matches :focus?

Let's try that (using a variation on Alex' syntax):

  .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.

The first change from blue to red is easy; it lasts for one second. 

The second change, from red to green, is slightly more complex. The
hover state still persists, but there's a new value on the element's
'effect' property, and that's what matters. The on-exit setting on
.button:hover is:

   color, 1s

The on-entry setting on .button:focus is:

   color, 1s

They happen to be the same, so there is not conflict; the color will
change from red to green in 1 second.

In a slightly more complex example, they could be different. Say we have this:

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

  .button:focus {
    color: green;
    effect: on-entry change(color, 2s);
  }

Should the transition take 1s or 2s? I think the spec is at liberty to
define the outcome. Some reasonable rules would be:

  - on-entry trumps on-exit (on a per-property basis)
  - longer transitions trumps shorter ones (ditto)

My preference is probably for the first of these.

Here's an example that sets changes (aka "transitions") on different
properties:

  .button:hover {
    color: red;
    left: 0px;
    effect: on-exit change(color, 1s);
  }

  .button:focus {
    color: green;
    left: 20px;
    effect: on-entry change(left, 1s);
  }

the result of a hovered element becoming focused would be that the
color changes to green, while simultaneously moving rightwards.

Here's an example that uses 'play()' instead of 'change()' (i.e.,
animations instead of transitions in the current specs' terminology):

  .button:hover {
    effect: on-entry play(bounce, 1s), on-exit play(bounce, 1s, reverse);
  }

  .button:focus {
    effect: on-entry play(sway, 2s), on-exit play(sway, 2s, reverse);
  }

When a hovered element becomes a focusee, there will be a 1s
(reversed!) 'bounce' and a 2s 'sway' movement -- both starting at the
same time.

So, to conclude, the effects are not tied to "states". Rather, the
effect trigger when the value of the 'effect' property changes for a
given element. When this happens, the respective 'on-exit' and
'on-entry' effects will be shown.

Makes sense, no?

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

Received on Monday, 5 April 2010 15:55:17 UTC