Another animation question

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