Re: [css3-transitions] Rounding behaviour

Aryeh and Øyvind,

Thanks so much for your feedback and test cases. Sorry for the delay in 
my response.

Although it's not said in so many words, the introduction to CSS 
Animations seems to imply that it builds on the definitions laid out in 
CSS Transitions so I think both test cases are useful.

Having thought about it a little more, I *think* we have the following 
breakdown:

* Animating an integer from 5->6 produces more useful/less surprising 
results with round than floor.
   round: 5 for dur/2, 6 for dur/2
   floor: 5 for dur (fill value 6)
* Animating an integer from 5->7 produces somewhat surprising results in 
either case unless the animation has 'animation-fill-mode: forwards' in 
which case floor is possibly more natural.
   round: 5 for dur/4, 6 for dur/2, 7 for dur/4
   floor: 5 for dur/2, 6 for dur/2 (fill value 7)
* Animating an integer from 5->7 with 'animation-timing-function: 
steps(3, start)' will probably give you more useful results with floor 
than round.
   round: 6 for dur*2/3, 7 for dur/3
   floor: 5 for dur/3, 6 for dur/3, 7 for dur/3
(Of course, if we had 'steps(3, middle)' round would give the more 
useful behaviour. 'steps(3, end)' is not particularly useful with either 
behaviour.)

I haven't tested the above, but from reading the spec, that's what I 
guess would happen.

I'd still really like to align with SVG here if at all possible, i.e. 
use round. Any objections?

Regards,

Brian

(2012/02/25 0:48), Øyvind Stenhaug wrote:
> On Fri, 24 Feb 2012 15:36:32 +0100, Aryeh Gregor <ayg@aryeh.name> wrote:
>
>> On Thu, Feb 23, 2012 at 9:10 PM, Brian Birtles <birtles@gmail.com> wrote:
>>> Dean? David? Any thoughts here?
>>
>> I tried testing what browsers do with z-index:
>>
>> <!DOCTYPE html>
>> <style>
>> div:first-child {
>> -webkit-animation: 7s infinite linear zindex;
>> -moz-animation: 7s infinite linear zindex;
>> }
>
>> None of the other browsers I tested in
>> (IE10 Developer Preview, Chrome 18 dev, Opera Next 12.00 alpha)
>> animated at all, so I don't think they support z-index transitions.
>
> Well, for starters those are animations, not transitions.
>
> <!DOCTYPE html>
> <title>Rounding behavior of transitioned z-index</title>
> <style>
> div {
> background: blue;
> position: absolute;
> top: 100px;
> width: 100px;
> height: 100px;
> -moz-transition-duration: 3s;
> -moz-transition-timing-function: steps(3);
> -ms-transition-duration: 3s;
> -ms-transition-timing-function: steps(3);
> -o-transition-duration: 3s;
> -o-transition-timing-function: steps(3);
> -webkit-transition-duration: 3s;
> -webkit-transition-timing-function: steps(3);
> left: 0;
> z-index: 1;
> }
> div.testing {
> left: 300px;
> z-index: 2;
> }
> #ref {
> left: 200px;
> background: gray;
> z-index: 2;
> }
> </style>
> <script>
> onload = function() {
> setTimeout(function() {
> document.querySelector('#test').className = 'testing';
> }, 100);
> }
> </script>
> <p>Does the blue go on top (round) or below (floor) the gray?</p>
> <div id="ref"></div>
> <div id="test"></div>
>
>

Received on Tuesday, 28 February 2012 07:24:36 UTC