W3C home > Mailing lists > Public > www-style@w3.org > February 2013

Re: [css-transitions] starting of transitions.

From: Andrew Fedoniouk <news@terrainformatica.com>
Date: Wed, 20 Feb 2013 20:46:18 -0800
Message-ID: <CALRQH7856SPYoC38+WWo9n05KhjJD+V4TfiQqvxcOOuR4OQCZw@mail.gmail.com>
To: "Tab Atkins Jr." <jackalmage@gmail.com>
Cc: "www-style@w3.org" <www-style@w3.org>
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.

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

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:08:26 UTC