[css3-animations] Establishing stacking context at animation start

Consider the following example:

@keyframes move {
from, 49% { transform: none;}
50% { transform: translateX(10px); }
to { transform: translateX(100px); }
}

<div style=“animation: move 10s”></div>

When should the div become a CSS stacking context? At the start of the animation, or at the 49% keyframe?

User agents generally agree on the latter[1], but I think it might make more sense to create stacking context at the start of the animation, if any of the animating property values create stacking context. This allows user agents to avoid having to recompute stacking in the middle of an animation in some cases.

It’s temping to borrow spec language from will-change for this, but we again run into the question of whether keyframes that contain property values that are no-ops on the target element affect stacking (e.g. transforms on <span>).

Simon

[1] http://codepen.io/anon/pen/gaLXYW

Received on Sunday, 27 September 2015 19:00:12 UTC