Re: transitions vs. animations

--------------------------------------------------
From: "Brad Kemper" <brad.kemper@gmail.com>
Sent: Sunday, April 04, 2010 11:33 AM
To: "Simon Fraser" <smfr@me.com>
Cc: "Anne van Kesteren" <annevk@opera.com>; <www-style@w3.org>; "Håkon Wium 
Lie" <howcome@opera.com>
Subject: Re: transitions vs. animations

>
> On Apr 4, 2010, at 10:11 AM, Simon Fraser wrote:
>
>> As I think was mentioned at the meeting, attaching effects to state 
>> changes causes a combinatorial explosion in the number of changes that an 
>> author has to deal with. I can see developers having to do lots of 
>> special-casing because they only want to run an exit effect on A when 
>> transitioning from A to B, and not A to C.
>>
>> Page authors want to think in terms of states, not in terms of state 
>> changes.
>
> This author agrees with you. Transitions are very simple to understand, 
> read, and write, (because the transition starts happening whenever the 
> property starts to change, regardless of how) and I don't want to lose 
> that.

Here is practical case that we've got ( don't pay attention on peculiar 
transition syntax ).

Here we have buttons that participate in following distinct 
transitions/animations:
1) On initial load button "arrives from outside" to its normal place.
2) When initial sequence finishes the element stays in normal place, 
no-transition of any kind.
3) When it gets :hover (mouse enters) it uses back-out function.
4) When it looses :hover it uses cubic-in function.

(sequence and sequence-state attributes below are set by script)

div#footer button:hover
{
    size:50px;
    transition: size( ease-function-in: back-out,
                               duration: 0.3s,
                               delay: 0.1s,
                               ease-function-out: cubic-in);
 }

div#footer button[sequence=startup]
{
   position:relative;
   top:73px; /* height of div#footer */
   opacity:0.0;
}

div#footer button[sequence=startup][sequence-state=started]
{
   top:0px;
   opacity:1.0;
   transition: top(ease-function-in: cubic-out, duration:0.4s, 
ease-function-out: none)
                     opacity(ease-function-in: linear, duration:0.4s, 
ease-function-out: none);
}

This sample shows that it is a must to be able to specify different 
parameters of "in" and "out"
changes.

Such practical setup is simply not feasible with current transitions draft.
The same element here can be transitioned to normal state using two distinct 
transition paths-
and there is no way to define this in current draft.

That is real sample from real application.
-- 
Andrew Fedoniouk

http://terrainformatica.com

Received on Sunday, 4 April 2010 20:25:06 UTC