Re: [CSS3] transition effects

Hi Bjoern,

Thanks for your email. It’s good that you’re pointing this out.

Bjoern Hoehrmann schreef:
>> CSS should have transition effects. Currently, when I want to animate 
>> something I basically have to let script take over part of the styling 
>> layer, and specify certain styling properties in the scripting layer. 
>>     
>
> We already have declarative means for animations and transition effects
> in SMIL and proposals like http://www.w3.org/Submission/xml-timing/ and
> http://www.mozilla.org/projects/xbl/xbl2.html that cover related issues.
> It would be best if you could explain in detail why these do not provide
> adequate syntax or semantics and why a CSS-based solution would,

I do by no means propose for this to replace SMIL, in the contrary I 
think it should stay simple and any kind of more complex functionality 
should be handled by a dedicated language such as SMIL.

What this would provide is an easy means to let CSS smoothly transition 
from one styled state to another. This is in essence no different from 
having a ‘hover’ effect, or some script changing the class of an element 
to make it look different, except that it will smoothly change it 
instead of instantly. This is done by means of an easy syntax, and can 
help the usability of web applications as animations are a good way to 
indicate to people where e.g. changes occurred.

Responses to my initial post about events and scripted animations, they 
are valueable but they are not what I am proposing, and I do not think 
they should be in CSS. Your mentioning of runtime synchronisation is 
also something that really doesn’t have to do anything with state 
transitions but rather with directing animations.

Maybe I should have used different wording (and property names) to be 
more clear, in that I am solely proposing a means for smoothening 
transitions, and not animations by means of in CSS.

> how the proposed solution interacts with those other facilities

Just like CSS does right now.

> why it would be
> sufficient to provide to functionality provided by your proposal and
> other problems (e.g., runtime synchronization of media embedded via CSS)
> do not need to be addressed

They do, but not in CSS. I do not want to have real animation 
functionality in CSS.

Basically, my proposal just lets the user indicate how different styling 
should smoothly change into eachother. The things that cause the change 
in state and styling are not part of CSS, but are done by the scripting 
layer. Such a scripting layer could be SMIL, but also JavaScript.

As an example of that, quoting from the SMIL animation module:
>
> The following example sets the |class| attribute of the text element 
> to the string "highlight" when the mouse moves over the element, and 
> removes the effect when the mouse moves off the element. 
>
> <text>This will highlight if you mouse over it...
>    <set attributeName="class" to="highlight" 
>             begin="mouseover" end="mouseout" />
> </text> 
>   

With the CSS properties I proposed, SMIL could set this, and the CSS 
would then make this happen smoothly instead of instantly.

I also do not think SMIL offers such functionality without putting 
styling properties in the SMIL code, especially not as extensive as in 
my proposal (all properties can be animated)?

This would actually complement SMIL and make it more powerful, SMIL 
being used for what it was created for —directing timelines, events and 
animation sequences, applying states to the document—, while the CSS 
takes care of the styling of the different states (as it’s supposed to) 
and also making them transition smoothly if the user wishes so.

The only slight overlap I see right now (with my limited knowledge of 
SMIL) is animateMotion and animateColor, and in these cases I think that 
the main use for these is when you really want to do specific animations 
(like ‘flash’ an item whose content has changed or make something move 
along a real animation pattern).

But when you would want to create ‘state transitions’ with them would 
actually be counterproductive as you’re moving part of the positioning 
information out of CSS into the SMIL ‘from’, ‘to’ and ‘by’ attributes. 
There is nothing particularly wrong with this for (event-driven or 
timeline-driven) animations, but for mere transition effects I do not 
think this is good. In fact, I know from practice with AJAX libraries 
which do exactly this in the scripting layer that this is not convenient 
nor good practice, as suddenly the styling is in the scripting layer as 
well.

> and how important you think this problem is
> relative to problems http://www.w3.org/Style/CSS/current-work the CSS WG
> is already trying to tackle.
>   

I think it would be very good to have, as the current solutions for 
transition effects involve putting styling in the scripting layer. And 
it provides a declarative well-degradable way to make smoother 
transitions between states happen, and the transition animation can 
simply be turned off or not implemented at all without breaking the 
application.

But as every group of users has different priorities I don’t think I can 
give a specific indication of how ‘relevant’ this is :). I think it 
would definitely be useful, and the functionality would interest a lot 
of users, with all the advantages mentioned above compared to current 
solutions.

If you have further comments or doubts, please let me hear them :).


~Grauw

-- 
Ushiko-san! Kimi wa doushite, Ushiko-san!!
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Laurens Holst, student, university of Utrecht, the Netherlands.
Website: www.grauw.nl. Backbase employee; www.backbase.com.