W3C home > Mailing lists > Public > www-style@w3.org > November 2013

Another animation question

From: Shane Stephens <shans@google.com>
Date: Fri, 8 Nov 2013 13:47:22 +1100
Message-ID: <CAGTfzwS3fULAvH_85A7qOhMFszzh9Qjny8aBLt4tU76eRt6YoQ@mail.gmail.com>
To: www-style list <www-style@w3.org>
Given:

<style>
#outer {
  font-size: 24px;
  transition: font-size 2s;
}

#outer:hover {
  font-size: 48px;
}

#middle {
  width: calc(5em + 10rem);
}

#inner {
  width: inherit;
  transition: width 0.5s;
}
</style>
<div id='outer'><div id='middle'><div id='inner'></div></div></div>

If I hover over outer, then inner does not transition (but does appear
to animate because it is inheriting a changing width from middle). If
after 1s, the root font-size changes (say from 30px to 15px), then
does inner's width start transitioning? If so, what does it start
transitioning to?

My reading of the spec says 'yes', and 'from 480px to 330px'. After
another 0.5s, I think it will then jump to 360px and animate to 390px.
Is this right?

The reason I'm asking is that I have some reservations as to whether
we can implement this behavior and remain performant. I'm keen on
discussing this further but I want to make sure I understand the
intended behavior correctly first.

Cheers,
    -Shane
Received on Friday, 8 November 2013 02:47:49 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:08:36 UTC