W3C home > Mailing lists > Public > www-style@w3.org > April 2010

Re: transitions vs. animations

From: Eli Morris-Heft <eli.morris.heft@gmail.com>
Date: Sat, 3 Apr 2010 11:07:33 -0500
Message-ID: <w2saa439c921004030907o79260f42qb732f9bd1d25d857@mail.gmail.com>
To: HÃ¥kon Wium Lie <howcome@opera.com>
Cc: www-style@w3.org
> That is, in this proposal the effect isn't triggered by a change in a
> property value (as is the case for transitions), but rather the
> effects are described on the 'effect' property. In practice, I
> believe, one can express all current transitions by setting/changing
> the value of the 'effect' property.

> [example 11]
>  .blue-box:hover {
>    left: 700px;
>    animation: on-entry left 1s, on-exit left 1s,
>       on-entry play(bounce) 1s, on-exit play(bounce) 1s;
>  }
> [example 12]
>  .blue-box:hover {
>    left: 700px;
>    animation: left 1s, on-exit left, play(bounce), on-exit play(bounce);
>  }

This proposal speaks to me. It seems to be understandable, simple, elegant,
and powerful. I do have a few comments on it, though:

> [example 13]
>  .blue-box:hover {
>    left: 700px;
>    animation-on-entry: left 1s, play(bounce) 1s;
>    animation-on-exit:  left 1s, play(bounce) 1s;
>  }

While I like the syntax proposed for examples 11 and 12, I see some issues
with the structure and property names in example 13.

First, I can't think of any other properties that only apply to a
pseudo-class. (Please feel free to supply any if there are some I've
missed.) 'content' comes close (almost always used with :before and :after),
but as other discussions on this list have shown, it is also intended to be
used with ::marker and I'm sure someone somewhere is using it in normal
elements as well. Also, even if such properties to exist, I think they
should be minimized.

The second issue I see is that it's arbitrary that these properties are on
the :hover pseudo-class declaration and not on the element itself. In my
mind, "on-entry" takes place before the element is hovered over, and surely
"on-exit" is unambiguous. Unless these are meant to apply to :focus and
:active (and :link and :visited? Oh boy...), in which case the names
'animation-on-entry' and 'animation-on-exit' cease to be good names. How
about 'animation-on-start' and 'animation-on-end' where 'start' and 'end'
refer to the start and end of the state of the pseudo-class?

Also, I'm not sure, but I might have just convinced myself that (with my
suggestions in the above paragraph) I like example 13's way better.

> Also, the 'keyframe' name may be changed. Perhaps to:
> [example 14]
>  @animation bounce {
>     from { top: 0; }
>    33%  { top: -20px; }
>    66%  { top: 20px; }
>    to   { top: 0; }
>  }

My last comment is simply that I feel that the 'keyframe' name should
remain. This rule does not describe the animation in full, only partially -
using its keyframes. It might be a more technical term, but I don't think
it's a lot to ask developers to learn for the sake of accuracy.

Eli Morris-Heft
Received on Tuesday, 6 April 2010 20:16:59 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:07:44 UTC