Re: transitions vs. animations

--------------------------------------------------
From: "Alex Mogilevsky" <alexmog@microsoft.com>
Sent: Sunday, April 04, 2010 6:05 PM
To: "Håkon Wium Lie" <howcome@opera.com>; <www-style@w3.org>
Subject: RE: transitions vs. animations

> I didn't have an opportunity to follow this discussion closely, so perhaps 
> anything I'll say has been said... I think this is a very important topic, 
> and it really would be great if we came up with a unified model.
>
> One fundamental difference between transitions and animations is the 
> definition of start and end state. Generally, it is like this:
>
> (known state A) --> animation --> (no end state)
> (known state A) --> transition --> (known state B)
>
> A transition is an animation that adapts to specific start and end state 
> and transition time. An animation doesn't even have to have an end state, 
> and if it has one it generally can't be predicted without running the 
> animation.
>
> Furthermore, transitions are actually triggered by end state:
>
> (any state A) --> transition --> (desired state B)
>

I would propose following definition:

Animation is a sequence (possibly endless, repeatable) of set of 
transitions.

Consider this sample from current CSS Animation proposal:

@keyframes 'wobble'
{
    0% { left: 100px;  }
    40% { left: 150px;  }
    60% {  left: 75px;   }
    100% {  left: 100px;  }
}

And now imagine that you have some timing function that changes attribute 
"wobble" on some element.
Having such function keyframe set above can be defined as:

[wobble] { transition: left(sin-in-out, Ts); }
[wobble=0%] { left: 100px; }
[wobble=40%] { left: 150px; }
[wobble=60%] { left: 75px; }
[wobble=100%] { left: 100px; }

I suspect that  in principle the whole animation module can be replaced by 
single attribute that defines timed generator:

sequence : attribute-name steps duration [ number-of-repeats];

So if you will define something like

div:hover
{
   sequence: "wobble" 4 400ms forever;
}
div[wobble=0] { left: 100px;  transition: ...; }
div[wobble=1] { left: 150px;  transition: ...; }
div[wobble=2] { left: 75px; transition: ...;}
div[wobble=3] { left: 100px; transition: ...;}

you will be able to define various animations or other time based style 
changes.

-- 
Andrew Fedoniouk

http://terrainformatica.com

Received on Monday, 5 April 2010 03:02:29 UTC