Re: [css-transitions] starting of transitions.

On Wed, Feb 20, 2013 at 8:04 PM, Tab Atkins Jr. <jackalmage@gmail.com> wrote:
> On Wed, Feb 20, 2013 at 7:54 PM, Andrew Fedoniouk
> <news@terrainformatica.com> wrote:
>> I've the question reading this section
>> http://www.w3.org/TR/css3-transitions/#starting
>>
>> Let's assume I have these two rules:
>>
>> a:link { color:red; transition: color 1s linear; }
>> a:link:hover { color:blue; transition: color 2s ease;  }
>>
>> so there are two types of animations: for entering :hover state
>> and leaving it.
>>
>> Question is: what timing function will be used when
>> <a> gets :hover state? And the same one for :not(:hover) state.
>
> The one that applies in the new-value state.  red->blue will be "2s
> ease", blue->red will be "1s linear".
>
>> The section above in my opinion is not clear enough on this.
>
> The spec says exactly what I said above:
>
> "When the computed value of an animatable property changes,
> implementations must decide what transitions to start based on the
> values of the ‘transition-property’, ‘transition-duration’,
> ‘transition-timing-function’, and ‘transition-delay’ properties at the
> time the animatable property would first have its new computed value."
>
> Additionally, there's an example below that sentence illustrating an
> identical case to the one you posted, which explains exactly what the
> intended effect is.
>

Yeah, that example defines that case.

But wording there is wrong:

"This provides a way for authors to specify different values of the
‘transition-*’ properties
for the “forward” and “reverse” transitions"

If you have for example these three rules:

input { transition: color linear 1s; }
input:checked { transition: color ease 2s; }
input:active { transition: color linear 3s; }

then there is no way for you to specify separate reverse transitions:
  :checked -> :not(:checked) *and*
  :active -> :not(:active)

-- 
Andrew Fedoniouk.

http://terrainformatica.com

Received on Thursday, 21 February 2013 04:46:45 UTC