Re: [css3-transitions]

2009/3/29 Dr. Olaf Hoffmann <Dr.O.Hoffmann@gmx.de>:
> Hello,
>
> these comments are related to
> http://www.w3.org/TR/2009/WD-css3-transitions-20090320/
>
>
>
> 1. It is not obvious to me how to specify the values, the
> transition appears between - ok, the initial value seems
> to be what is called in SMIL/SVG animations the
> underlying value, how is the 'to-value' specified?
> Is it possible to specify a transition from a 'to-value' to
> the underlying value too?
> Is it required to use the animation module or another
> language (like scripting) to specify all this?
> If another language or scripting is required, this would be
> disappointing and discouraging for many authors relying on
> declarative notations for styling and layout and simplicity.
> Other authors would be forced to create constructions
> not accessible anymore either without activated scripting or
> CSS, what would be bad/poor styling.
>

It seems to me that you missed the meaning of transition: a transition
happens when the Specified Value of a property that is defined to be
transitioned is changed. The from value is the previous value of the
property, the to value is the new value.
Transitions don't require animations, SMIL or scripting. Just a
property value changing.
If you want the opposite transition (from "to" to "from"), just go
back to the previous value.

>
> 2. It is not obvious to me, how the native CSS works to begin
> the transition or is this always triggered from outside of CSS
> or with the onload event of the CSS file?
> I think, it would be essential especially for authors, who want
> to use these module to style (X)HTML or XML, to have a
> native CSS method to start the transition. This is less important
> for SVG authors, because SVG has already its own more
> advanced animation methods covering this problem in a
> convenient way.
> This SVG/SMIL solution could be a guide, what is required
> to start transitions.
> Especially the events activate, beginEvent, endEvent,
> repeatEvent could already cover a lot of use cases.
> Device dependent events like click, mousedown, mouseup,
> mouseout, mouseover, mousemove could be useful too,
> however they have of course the problem, that they are
> not accessible, if the user has no pointing device.
> Another essential feature is the possibility to combine
> the event with an identifier.

Transitions don't depend on events, they depend on property Specified
Value changes. This is caused by changing the set of selectors
matching an element (ie adding a class, a pseudo-class or moving an
element).

> Currently CSS mainly seems to have :hover and :focus
> to begin or to change something. If we have for example
> the :hover, is the transition stopped, if :hover does not
> apply anymore? This could be avoided of course with
> something like ID.activate or ID.click as begin.

If :hover doesn't apply anymore, and :hover changed a property (and
started a transition), then the new Specified Value is the one the
property add before hovering. The property is so transition between
the current Computed Value (in the middle of transition) and the
Computed Value found for the new (ie the old) Specified Value.

>
> 3. What means the value 'all' for the transition-property
> exactly? If we change the value of transition property for
> example in the given examples I and II. Does it apply
> to anything or nothing or only to those properties we
> add within the paranthesis, for example:
>
> div {
>    transition-property: all;
>    transition-duration: 2s, 4s;
>    opacity: 0.5;
>    left: 10ex;
>  }

Transition-property: all means that all properties (not just those in
the same block) declare transitions, that is when the Specified Value
of every property is changed, it will be transitioned.
For what concerns transition-duration, if I remember well, it has been
decided that values are clipped to the number of values in
transition-property (one property = one duration = one delay = one
timing function).

> 4. About the ‘transition-timing-function’ section:
> Note, that the name of the man, who introduced
> those curves is spelled in a different way, with
> (X)HTML notation: 'B&eacute;zier' and not 'bezier'

Assumed editioral.

> Is it ok to reference a wikipedia article, everyone
> can change at any time in a draft/specification?

It is informative anyway.

> In the prose is noted '(see Figure 1)'
> this should be '(see Figure 2)'?
>
> In Figure 2 the axis descriptions are
> Input/Output Percentages, however the
> scale is only from 0 to 1 as what is to
> note in the related values, these are
> fractions, not percentages.
>

Both editioral issues.


> 5. in section 4. it is not noted, how to animate
> between keywords (they are mentioned
> in 5. too). This will be the same as for
> 'visibility'? Or are the keywords always
> converted into numbers for the current
> animatable properties (seems to apply
> only to vertical-align).

Not all properties are animatable (see section 2). I expect that a
specific section for vertical-align will be included if we want to
support it (or vertical-align will be modified to find a Computed
Value being always <length> or <percentage>)

> About paint-server - how to interpolate
> between a radial and linear gradient?
> Is the direction vector for linear gradients
> interpolated too if different? Respectively
> the cx, cy, fx, fy, r for a radial gradient?
> What about gradientUnits, gradientTransform,
> spreadMethod, xlink:href? Or is the interpolation
> done for each pixel of the output separately?
> I think, it needs some more explanations
> how this should work.

Probably only gradients of the same types can be interpolated. This is
similar with happens with width (you cannot transition from a length
to a percentage)

> 6. in section 5. Animatable properties
> the transform property seems to miss,
> but in 4. it is noted, that this is animatable too.

Again, editiorial

> Why not animation for 'display'? This is already
> now quite popular to be changed with :hover,
> I think more than for example 'visibility'

What is the meaning of display in the middle of a transition, eg.
between block and inline? Inline-block? :D
Or you want to transition the reflowing caused by display change?

If you want to get fading boxes (animated submenus appearing on
:hover, for example), you should change another property as well as
display, such as opacity or height.

>
>
> Best wishes
>
> Olaf

Next time you start a thread remember to post to "public-fx@w3.org",
that is the best place for visual effects in CSS / SVG.

Giovanni

Received on Monday, 30 March 2009 13:53:32 UTC