Re: transitions vs. animations

Eli Morris-Heft wrote:

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

Those are the best words a proposal can hope for. Thanks!

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

I think the 'effect' property (or whatever we call it) can apply to
all elements -- not just those with a pseudo-class. For example:

  .blue-box {
    effect: on-entry do(bounce) 1s, on-exit do(bounce) 1s;
  }

One could perhaps define 'on-entry' to mean onpageload? And on-exit
when the the user leaves the page? It's not that important what the
answer is, but it needs to be defined.

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

Yes, I think they can apply to all of these. 

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

I think of 'on-entry' and 'on-exit' as entering/exiting a state, not
entering/exiting an area on the screen. As such, I think 'on-entry'
and 'on-exit' can work for more than just hover, but so can 'on-start'
and 'on-end'. Or, would it it be 'at-start' and 'at-end'. Hmm.

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

Right. It gives a better overview.

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

Good names are better than accurate names. But 'keyframe' can also be
good.

Cheers,

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

Received on Sunday, 4 April 2010 03:48:54 UTC