Re: [CSS Transitions] z-index & not animating one property

On 14/01/2012 4:08 PM, Witold Baryluk wrote:
> On 01-13 17:00, Tab Atkins Jr. wrote:
>> On Fri, Jan 13, 2012 at 3:06 PM, Antoine Sanchez<ckkoshi@gmail.com>  wrote:
>>> Hello world,
>>>
>>> I'm coming here to understand why z-index is under the animation of
>>> css-transition?
>>> I don't understand the usability of animating this property.
>>>
>>>
>>> Also, I come with my second question:
>>> It's possible to use transition-property to select any property, but
>>> if we want to animate all properties except one, we have to specify
>>> all properties to animate, it's not useful.
>>>
>>> something like:
>>> transition-property:all, !z-index;
>>>
>>> could be useful.
>>
>> z-index is animatable because why not?  It's a number, and numbers can
>> be transitioned.
>
> It is discrete number, and how will transitioning work from z-index: 1
> to 2? It will jump?

Correct. The transition should either take place at the beginning or end 
of a transition (timing is better in @keyframes). This is somewhat like 
transitioning from <value> to 'auto'.

> What will javascript get when it will ask for
> current in-flight z-index (with current or future api)?

Depends on the answer to when such *instant* transitions should happen.

> For all other numbers, transitioning makes sense because they are more
> or less continious, but z-index?

Maybe translateZ() is more what you are after but only when a browser 
supports 3D transforms (like WebKit).

   from { transform: translateZ(2500px); }

   to   { transform: translateZ(-18000px); }

>> I agree that there's not a lot of use, but given how
>> simple it is once you support animating other numeric properties,
>> there's no reason to shut it down.
> Well, yes, if it is easy to implement, then why not. But I agree, than
> relaying on transition-property: all, is very dangerous, even more
> because most tutorials on the Internet uses 'all' in their examples.

So there are tutorials using transition of x-index?


-- 
Alan Gresley
http://css-3d.org/
http://css-class.com/

Received on Monday, 16 January 2012 03:09:22 UTC