Re: transitions vs. animations

--------------------------------------------------
From: "Brad Kemper" <brad.kemper@gmail.com>
Sent: Friday, April 09, 2010 4:24 PM
To: "Håkon Wium Lie" <howcome@opera.com>
Cc: <www-style@w3.org>
Subject: Re: transitions vs. animations

>
>
> On Apr 9, 2010, at 1:42 PM, Håkon Wium Lie <howcome@opera.com> wrote:
>
>> Brad Kemper wrote:
>>>
>>>
>>> Sorry. I meant to say 'translate', not 'transform'. This probably
>>> proves a point of some kind.
>>
>> It does. We see it all the time, even in the CSS WG meeting where
>> people have been looking at this for a while.
>>
>> I think transitions will be a big hit, they will change the web.
>
> I agree.
>
>> We
>> have the power to give it a likable name.
>
> I like it when the name makes it pretty clear what it does and what it  is 
> for, succinctly. .
>
>> The name we give it will
>> aquire the meaning we want.
>> ...
>> There are several good alternatives to 'transition':
>>
>>   shift: left 1s;
>>   change: left 1s;
>>   flux: left 1s;
>>   phase: left 1s;
>>
>> E.g., "CSS shifts" is a marketable term.
>
> Considering all the following property names:
>
> Transition
> Translate
> Tranform
> Text-transform
> Character-transform
>
> Of all these, I'd say that 'transition' is the best, the one I'd most 
> like to keep. It described exactly what's happening, in a way that 
> 'shift' doesn't, IMO. The one I like the least is 'translate', a word 
> that probably appeals to mathematicians and engineers, and not many 
> others. Everyone else speaking English would just say 'move'.  But it  and 
> 'transform' are in SVG, so I suppose we may be stuck with them.  And if we 
> have 'transform', then 'character-transform' makes logical  sense, since 
> the characters are being scaled and "translated" (you  know, moved). That 
> only leaves "text-transform", and it is way too  late to change that one. 
> So I don't know.  Maintain an open mind to  alternatives to 'transition', 
> but so far I've haven't heard one I like  better.
>

Sorry, but why not just 'animate'?

div { position:absolute; left:0px; }

So simple transition will be:

div:focus { left:100px; animate: left ease-in 1s; }

And repeatable animation will be

div:focus { animate: left "wobble" 1s infinite; }

Where "wobble" is defined as table function:

@profile "wobble"  0% 0px,  40% 150px, 60% 75px, 100% 0px;

Both cases define animations - one happens to be one-time animation
and another is repeatable infinite animation.

Idea was explained here:
http://lists.w3.org/Archives/Public/www-style/2010Apr/0264.html

More complex thing:

div:focus
{
   left:100px;
   animate:  left ease-in 1s,
                    top "wobble" 0.25s 4;
}

trajectory will be sort of sin function with 4 full periods.

-- 
Andrew Fedoniouk

http://terrainformatica.com

Received on Saturday, 10 April 2010 02:18:31 UTC