Re: [css3-transitions] starting and reversing animations

On Jan 29, 2010, at 6:17 AM, Tab Atkins Jr. wrote:

> On Fri, Jan 29, 2010 at 1:11 AM, Andrew Fedoniouk
> <news@terrainformatica.com> wrote:
>> So you will have two transitions defined:
>> 
>> div { transition: 111 }
>> div:hover { transition: 222 }
>> 
>> Question is which value of the transition to use when the element changes
>> its :hover state.
>> 
>> It appears that in your interpretation used value is the one that element
>> had before changing the style and not the one that is defined
>> for the element in that state.
> 
> That is indeed how it works, based on examples used in mailing lists.
> An example of such would probably be good.

The transition properties that are used are taken from the destination state.
The spec needs to be more clear about this, but as an example:

div { }
div:hover { transition: 111; }

will only run the transition when :hover is being applied, not when it is
being removed.

> 
>> If it is so than it makes sense to define this somehow.
>> 
>> In any case this phrase
>> 
>> "If a running transition with duration T, executing so far for duration TE,
>> from state A, to state B, is interrupted by a property change that would
>> start a new transition"
>> 
>> somehow implies that value of the transition has immediate effect.
> 
> I'm not sure what you mean here.  That phrase just indicates some
> special behavior if you, say, quickly hover and unhover an element
> before its transition can complete.  If a transition is *finished*
> from state A to state B, and you then go back to state A, there is no
> special behavior - it's just a new transition starting.

The rule is that, once a transition has started, you can think of it as having
taken a snapshot of the transition properties from the destination style.
If the transition is still running, and you change, say, transition-duration,
then the running transition is not affected.

If, on the other hand, you change the property that initiated the transition
(say, "width"), then the running transition will be re-targeted towards the
new value, possibly also picking up new transition properties if you've
changed them. 
> 
> 
>> It will be nice if it would be so easy.
>> 
>> Consider that you have, say, these two rules
>> 
>> div:hover { .... }
>> div:checked { .... }
>> 
>> and you want to define  different types of animations for
>> :normal -> :hover and
>> :normal -> :checked changes.
>> 
>> Following your logic it is not possible to define different animations for
>> these two distinct paths. As used value for the transition
>> is not the one that defined inside :hover rule but the one that the element
>> used to have. Am I correct in my understanding of your idea?
> 
> Correct - the transition property the element has *before* the change
> is what's used to run the transition.

No, the transition properties are taken from the destination style.

Simon