Re: transitions vs. animations

We have :hover for when the mouse hovers.  We have essentially the
unadorned selector for the normal state.  I'm now beginning to
understand the resistance to on-entry or other event based styles.

I have some confusion with animations.  Perhaps the example below is
just someone making a mistake but if someone does:

@keyframes baduse {
  from { }
  30% { left: 80px; }
  60% { left: 120px; }
  to { left: 80px; }
}

This is the opposite of Simon's case, but my understand is that at the
end of the animation, the element would pop back to the original
position from the 80px position.

It would be nice if we could specify everything using percentages.
Note that we can already specify the time as a percentage.

For example:

@keyframes left-slide {
   from { }
   25% { left: 50%; }
   50% { left: 100%; }
   75% { left: 50%; }
   to { }
}

And it would be nice if we have another @ item for transitions.  I'll
use @transition.

Now, we have some ability to reuse pieces.

To understand my ideas, an animation starts in state A and ends in
state A even if that means a sudden jerk at the end.  A transition
starts in state A and ends in state B.  state A is the state of the
element before any animation or transition.  state B is the state
after all the transitions are completed.  (Essentially using the same
concepts or terms that the transitions and animations documents use
now in this area.)

So, lets say we have the left-slide @keyframes (above) and an
@transition that looks maybe like:

@transition slide-up-down {
   from { }
   25% { top: 25%; }
   50% { top: 50%; }
   75% { top: 75%; }
   to { top: 100% }
}

couple with two uses:

div /* normal */ {
   top: 100 px;
   left: 100 px;
   transition-sequence: slide-up-down 1s, left-slide 1s 50px
}

(I have some obvious inconsitences in that notation)

div:hover {
   top: 0px;
   left: 0px;
   transition-sequence: left-slide 1s 50px, slide-up-down 1s
}

When the user hovers the mouse, the div will
do a left-slide for 1 second by 50 px (which moves back and forth
once) and then it will slide up to the top=0 position.

When the user moves the mouse and stops the hover, the box will slide
down to the top=100 position over the course of 1 second, then it will
do a left slide by 50px (as specified in the normal div entry)

One new idea presented here is that using percentages in as many
places as possible allows for the transitions and animations to be
reused.  Their final amounts would be like parameters being passed in.
This only applies to animations since transitions already have a
"from" and a "to", it only needs a "how".  animations need a "how
much" that a transition does not have.  (This idea is not essential
to the other two ideas.)

The second new idea is an @keyframe type notation for transitions.

The third (which is not new at all -- just a realization on my part)
is that the css for the normal state can specify the transition and
animation when that state is entered.  We don't need on-entry or
on-exit concepts.

The last idea is the 'transition-sequence' attribute to string a  
sequence
of them together where "them" includes animations.

There might also be a desire along with transition-sequence, to add a
"parallel" method so that multiple animations or transitions could be
done at the same time (i.e. move left and darken).  But, that ability
already exists by putting the parallel activies inside the @ block and
I believe that that will be more clear and easier to manage.

Perry

Received on Monday, 5 April 2010 20:31:28 UTC