- From: Dean Jackson <dino@apple.com>
- Date: Tue, 02 Aug 2011 17:25:57 -0700
- To: Alan Gresley <alan@css-class.com>
- Cc: Rik Cabanier <cabanier@gmail.com>, Jonathan Snook <jonathan@snook.ca>, www-style@w3.org
On 02/08/2011, at 4:56 PM, Alan Gresley wrote:
> On 3/08/2011 3:00 AM, Rik Cabanier wrote:
>> On Mon, Aug 1, 2011 at 11:14 PM, Alan Gresley wrote:
>
>>> Being able to use
>>> display: none could have solved the issue but I can't see how you can
>>> animate from display: block to display: none with an animation that last
>>> longer than 100ms or even in seconds and have it look good. It's not like it
>>> just vanishes.
>>>
>>
>> It should just vanish. There is no 'step' between display: none and block
>
>
> What happens if the animation between display: block and display: none is 4 seconds long.
>
>
> @keyframes four-seconds-long-animation {
> from { display: block }
> to { display: none }
> }
>
>
> In what fashion does it vanish over a 4 second time period? What should happen if a UAs is faced with such an animation?
You can think of an animation as a function that takes time as an input and produces a percentage as output. That percentage determines the state of the element (in this case the style, or the value of a property), usually by calculating what it means as a change from the starting state to the ending state. In come cases, such as numbers, this is easy. In other cases, such as where there is not a smooth path between the states, you have to describe what that percentage means. The 'display' property is a good example.
The spec could say that percentages < 100 for non-continuous properties are the starting state. So in the example above, the animation would be 'block' for four seconds up to the last frame where it would immediately change to 'none'. As an author you can control the percentage by using the timing function. If you wanted the value 'block' value to change at the start of the animation, you could use the 'step-start' value.
There is another alternative which may be too hard to specify, which is that UAs might crossfade the rendering of the begin and end states. The problem is when you want other things to animate at the same time.
Dean
Received on Wednesday, 3 August 2011 00:26:26 UTC