Re: transitions vs. animations

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