Re: [css3-transitions]

Giovanni Campagna:
> 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: 

I did not find or understand this within the draft/specification,
maybe more complete samples can be useful to improve 
better understanding. Yesterday and today I found some
WebKit samples somewhere around, but this draft should
be understandable on its own.

> 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.

About the found samples - this was always CSS for
(X)HTML, roughly about 50% use :hover to change 
something, the other 50% use scripting (therefore 
those 50% did not work at all with
my preferences for unkown pages ;o)
I did not found an example using :focus or :active
of maybe a SMIL/SVG set of a CSS property - does
this cause a transition too or is the effect overwritten
by the higher priority of SMIL/SVG CSS-property
animations?
SVG+CSS samples I created today did not work at
all in the WebKit I have installed (528.16, Safari 4 beta),
neither with :hover nor with setting a property. 

Already this indicates, that it can be very useful, to explain
it better and to provide more examples for better 
understanding for CSS in (X)HTML and SVG.

>
> > 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).
>

Then it could be shown with samples, how values can be changed 
natively within CSS.

For example:

First CSS-file:
div {
transition-property: opacity;
transition-duration: 20s;
opacity:0.5
}
  
Second CSS-file:
div#something {
opacity: 0.9
}

Does it cause a transition 'onload' of the second CSS-file,
especially visible, if the 'onload' of the second CSS-file is
retarded for some reasons by the server for 5s?


Or this:
input#something {
transition-property: transform;
transition-duration: 9s;
transform: rotate(180deg)
 }

input#something:focus
{
transform: scale(-1.2,1.2)
}




Or this one:
a#something {
transition-property: color;
transition-duration: 5s;
color: blue
}

a#something:active
{
color: red
}


Or this one:
div#something {
transition-property: left;
transition-duration: 17s;
position: absolute;
left: 1em;
top: 1em;
}

div#something:hover {
left: 200em;
}

There is no precise definition of :hover concerning
timing of those transitions in the selector section/module.
When does it exactly start, when does it stop?
Trying similar things with WebKit today, this viewer
starts something, when the pointing device
above #something is changed.
However, if only #something is moved away from
the pointing device, this does not mean for WebKit,
that :hover is not applicable anymore. But much
later, when the pointing device is moved again, but
far away from #something, :hover becomes not
applicable anymore and the transitions starts again.
I think, this is not the only possible interpretation
of :hover according how this is specified in CSS.


> > 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.
>

Following discussions between many authors and looking on their
'desires' in the last 10 years, I think, events like ID.activate or ID.click
would be in general useful to be able to change a value - with or without 
a transition and natively in CSS without using another language
like SMIL or a scripting language.



....
>
> > 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>)

It is noted to be animatable/transitionable already in 5. as
I noted above, including 'keywords' ...

>
> > 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. 

Maybe, doing it pixel for pixel would be an interesting effect too ;o)

> This is 
> similar with happens with width (you cannot transition from a length
> to a percentage)

Why not? The percentage can be computed at any time to a 
measurable length, if it represents a fraction of a length.
You cannot have a transition between seconds and millimeter
maybe, because both are units for different entities in physics.

>
> > 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?

The same applies for visibility, what is indicated to be 
animatable/transitionable ...

....
>
> 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.
>

It is noted in the draft:
"The (archived) public mailing list www-style@w3.org (see instructions) is 
preferred for discussion of this specification."

Should be changed then to the new list as soon as applicable ...


Olaf