Re: Units of time in Web Animations [was: Intent to Ship: Element.animate]

On Thu, Apr 17, 2014 at 8:47 AM, Paul Irish <paulirish@google.com> wrote:

> I, too, expected much higher use while crafting CSS transitions in ms, but
> I did a Github codesearch and was surprised that sec dominates ms for
> transitions:
>
> 300ms<https://github.com/search?q=transition%3A+300ms&type=Code&ref=searchresults> :
> 95k results
> .3s<https://github.com/search?q=transition%3A+.3s&type=Code&ref=searchresults> :
> 666k results
>
> 500ms<https://github.com/search?q=transition%3A+500ms&type=Code&ref=searchresults> :
> 78k results
> .5s<https://github.com/search?q=transition%3A+.5s&type=Code&ref=searchresults> :
> 281k results
>
> (GH Codesearch doesn't handle duplicates well, though, so these numbers
> aren't perfect.)
>

>From this it seems like roughly 80-85% of CSS content uses seconds?

However, as a counter example, I polled [1] (without bias, I hope!) to ask
> what people expected these durations to mean:
>
> > elem.animate({ opacity: '0' }, 100);
> > elem.animate({ opacity: '0' }, 1);
>
> The results: ~95% of people read these as millisecond durations.
>
>
I'm somewhat surprised by this - why would you ever animate opacity over
1ms? Nevertheless, it's a useful data point. Thanks! :)

The sample size for that survey is ~100 people, correct?

Cheers,
    -Shane


>
> [1] https://plus.google.com/+PaulIrish/posts/QchucJRH7BX
>
>
> On Wed, Apr 16, 2014 at 3:40 PM, Jeremie Patonnier <
> jeremie.patonnier@gmail.com> wrote:
>
>> Hi :)
>>
>>
>> 2014-04-17 0:30 GMT+02:00 Shane Stephens <shans@google.com>:
>>
>> On Thu, Apr 17, 2014 at 8:21 AM, Domenic Denicola <
>>> domenic@domenicdenicola.com> wrote:
>>>
>>>>  Regardless of spec examples, all of the real-world CSS transition and
>>>> animation code I've seen uses the ms unit, not the s one. I don't think CSS
>>>> provides any guidance here.
>>>>
>>>
>>> The first three sites I found transitions on use seconds:
>>> google.com uses 0.1s, 0.5s (not 100ms, 500ms).
>>> twitter.com uses 0.3s (not 300ms)
>>> www.smh.com.au uses 0.4s, 0.1s (not 400ms, 100ms)
>>>
>>
>> This is statistically inaccurate. There are millions of web sites out
>> there. How those three could be representative of all the rest?
>>
>>
>>> Literally the first 3 transitions tutorials I found use seconds:
>>>
>>> https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions
>>> http://css3.bradshawenterprises.com/transitions/
>>> http://docs.webplatform.org/wiki/tutorials/css_transitions
>>>
>>
>> Which does not presume of what users are truly doing. CSS support both
>> second and millisecond. If both are supported, it's because both are used.
>>
>>
>>> Do you have counter-examples?
>>>
>>
>> Unfortunately, no time now to provide you a list, but basically, all the
>> web sites my company is working on (we prefer using milliseconds... but I
>> do not assume our behavior is the general one)
>>
>> It would be great if you could provide more accurate statistics.
>>
>> best
>> --
>> Jeremie
>> .............................
>> Web : http://jeremie.patonnier.net
>> Twitter : @JeremiePat <http://twitter.com/JeremiePat>
>>
>
>