W3C home > Mailing lists > Public > www-style@w3.org > April 2010

Re: transitions vs. animations

From: Andrew Fedoniouk <news@terrainformatica.com>
Date: Fri, 9 Apr 2010 19:18:02 -0700
Message-ID: <5136F1C81D234E6392BB1913561C52F0@terra3>
To: "Brad Kemper" <brad.kemper@gmail.com>, Håkon Wium Lie <howcome@opera.com>
Cc: <www-style@w3.org>
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:

More complex thing:

   animate:  left ease-in 1s,
                    top "wobble" 0.25s 4;

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

Andrew Fedoniouk


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

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:07:45 UTC