Re: [css3-animations] display:none, visibility:hidden and animations

On 30/09/2011 7:12 AM, Tab Atkins Jr. wrote:
> On Thu, Sep 29, 2011 at 2:04 PM, Sylvain Galineau
> <sylvaing@microsoft.com>  wrote:
>> This follows up on a thread this past July [1] that never reached a
>> clear conclusion as we ended up discussing ways of synchronizing
>> multiple animations since display:none can be used for that purpose
>> in Webkit.
>>
>> One could say that display and animation properties are orthogonal
>> to one another i.e. the latter animates properties, the latter what
>> kind of box an element generates. So animations on a display:none
>> element are run so that querying the animated properties along the
>> way will return the expected values; and the visual result of
>> turning the element back to display != none would reflect the
>> current state of the animation.

Correct, see below.

>> This would be true for the animated
>> children of a display:none parent, as well as for visibility:hidden
>> elements and their children.
>>
>> This would also be consistent with what would happen if your
>> animation was entirely script-based with no use of CSS3
>> Animations.
>>
>> Besides the implementation/runtime cost of managing invisible
>> animations, what are the issues with this model ?
>>
>> [1]
>> http://lists.w3.org/Archives/Public/www-style/2011Jul/0267.html
>
> I don't believe there are any issues.  This is clearly the correct
> model.  There is no reason whatsoever for 'display' to have an
> effect on what animations run.
>
> ~TJ

With the below code:

- WebKit (Chrome and Safari) will begin the animation again after 
selecting display: block (I will take it from Silvain's comment that the 
animation would stop after selecting display none).

- Gecko runs the animation without stop and selecting display: none and 
display: block alternately will clearly show this.

- Sylvain, how does IE10 preview 3 handle the below test?


So it seems that display does have an effect. I can not speak of child 
elements of display: none (either by CSS or script) parent.

Removing the CSS comment away from display: none and restesting in Gecko 
shows that the animation begins when a page is loaded (or refreshed) and 
selecting display: block will show it at some point in the animation run.


Alan



<!doctype html>

<style>

body { padding: 50px; }
.outer {
   border: 5px solid teal;
   width: 800px;
   height: 100px;
   margin-top: 50px;
   background: -webkit-repeating-linear-gradient(left, white, white 
100px, #ddd 100px, #ddd 200px);
   background: -moz-repeating-linear-gradient(left, white, white 100px, 
#ddd 100px, #ddd 200px);
   background: -ms-repeating-linear-gradient(left, white, white 100px, 
#ddd 100px, #ddd 200px);
}

#element {
   width: 100px;
   height: 100px;
/*display:none; makes no difference */
   background: yellowgreen;
   -webkit-animation: move 10s infinite linear;
   -moz-animation: move 10s infinite linear;
   -ms-animation: move 10s infinite linear;
}
@-webkit-keyframes move {
   0% { margin-left: 0px; }
   100% { margin-left: 700px; }
}
@-moz-keyframes move {
   0% { margin-left: 0px; }
   100% { margin-left: 700px; }
}
@-ms-keyframes move {
   0% { margin-left: 0px; }
   100% { margin-left: 700px; }
}

</style>

<button onclick="document.getElementById('element').style.display = 
'none';">display none</button>

<button onclick="document.getElementById('element').style.display = 
'block';">display block</button>


<div class="outer">
   <div id="element"></div>
</div>




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

Received on Friday, 30 September 2011 00:41:08 UTC