W3C home > Mailing lists > Public > www-style@w3.org > May 2011

Re: Transitioning top and bottom properties.

From: Alan Gresley <alan@css-class.com>
Date: Wed, 01 Jun 2011 02:57:31 +1000
Message-ID: <4DE51DFB.2080106@css-class.com>
To: Maarten Billemont <lhunath@gmail.com>
CC: CSS 3 W3C Group <www-style@w3.org>
On 31/05/2011 5:09 PM, Maarten Billemont wrote:
> On 30 May 2011, at 12:33, Alan Gresley wrote:
>> On 29/05/2011 7:41 AM, Maarten Billemont wrote:
>>> As a result, transitioning from/to auto values becomes
>>> impossible. Which is, IMO, a huge lacking that will become all
>>> the more clear and painful as the standard gets applied
>>> throughout.
>>> I do hope I'm actually overlooking something.
>> You are overlooking something. Let's explain this a different way.
>> You have one element with position: absolute. Let's say that when
>> we give an element this style, it magically also gets these styles,
>> 'left: auto, top: auto, bottom: auto and bottom: auto'.
>> Now implementations do not do anything with auto apart from use it
>> as the final computed style where it is appropriate to do so. Since
>> your use case is in horizontal writing mode with LTR inline
>> direction, the only values that are needed to be calculated are
>> left: auto and top: auto. These are computed as left: 0 and top: 0.
>> This is the same x (left) and y (top) position it would have had if
>> the element was position: static.
> I understand that.  I'm afraid I don't yet see where transitions come
> into play, or the point you're trying to make.

The point is that you're not transitioning from top: value to top: auto. 
You are transitioning from bottom: value to bottom: value. The thing 
that starts the transition is hover. This is the initial style for the 
jsfiddle example.

#element {
   top: 100%;
   bottom: auto;

Now when you hover, the style rules for #element are overridden by the 
specificity of #element:hover and the CSS values of the #element will be 

#element {
   top: auto;
   bottom: 0;

Now here is your transition.

   bottom: 0  -------->  bottom: 0

>>> Is there a reason why it was determined that transitioning should
>>> be applied to property values rather than their effect on the
>>> element?
>> Would you expect that the below would work with transition?
>> margin-left: 100px -----> margin-left: auto
>> margin-left: auto -----> margin-left: 100px
> Certainly.  I'd expect that the box would be calculated twice, once
> before and once after, and that the user agent would transition
> between both boxes.

Sorry, I gave the wrong values above. Anyway, If that is your answer, I 
can now presume that you are getting transition mixed up with animation. 
This will work.

#ap {
   margin-left: 100px;
   margin-right: auto;
   background: lime;
#ap:hover {
   -webkit-animation: move 5s infinite linear;
@-webkit-keyframes move {
	from {  margin-left: 100px; margin-right: auto; }
	to { margin-left: auto; margin-right: 100px; }

But again, auto is doing nothing special.

>>> Consider also that, when you style an element, you apply
>>> properties with the net effect in mind. Similarly, when you
>>> transition, you do so intuitively expecting to transition from
>>> net effect A to net effect B.
>> You are wanting CSS to do that?
> Isn't that the whole point of CSS, and more specifically, its
> transitions module?

Transitions only change the values of a property. The don't swap between 
properties (neither does animations). I could give you an elegant 
solution to your use case but before I could, I would need to know what 
you are really seeking. I would never really know if you had no image to 
begin with and this is precisely where your use case stands.

As a side note. I usually give elegant solutions on CSS-discuss and not 

Alan Gresley
Received on Tuesday, 31 May 2011 16:58:05 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:38:46 UTC