sass - Rotation breaks in CSS animation when height/width is defined in keyframes -

sass - Rotation breaks in CSS animation when height/width is defined in keyframes -

i've got element i'm trying animate in. want animation in 2 steps, first scale , rotate square in, , widen square. start off transform: scale(.1) rotatex(360deg); , animate transform: none, works well. (in step) declare height/width in keyframes, rotation stops working. still scale should, , height/width properties applied, rotation skipped entirely.

here codepen demonstrate issue: http://codepen.io/anon/pen/abdck

as see, there's no rotation going on in there, scales in. now, scroll downwards in css , comment out height/width properties, , you'll see rotation works.

i've tried different combinations of having/not having height/width declared in normal selector (not in keyframe), i've tried putting height/width declarations in different steps in keyframes. no success.

i same result in both firefox in chrome. intended behaviour? if so, why? there workarounds?

something transforms in keyframes not beingness balanced?. need add together translatex(0deg) either 40% keyframe, of 100% keyframe, depending on want it.

http://codepen.io/anon/pen/ljkkd

i'd sure love if explain reason - "solution"

css sass css-animations css-transforms