Easing transition doesn't seem to work on delay - html

Question

I have a div with fixed height and width and upon clicking the label(checkbox trick) I expand the div to 100% width and height. That works, however the issue is in the transition.
I wish to create a easing transition where first the width expands and then the height expands. However upon defining the transitions the easing doesn't happen, instead it's like transition timing function goes to step-end. The transition happens instantly without easing(even though the delay on height transformation works).
tl;dr: The transition loses smoothness
Example: jsFiddle

Answer 1

The properties can not be transitioned from different "metrics".
In the base state, you specify height in px; in the changed state, you specify it in percentage. That won't work.
You can set it to work somehow with some tricks, that are not fully satisfactory; the best of them is to use max-height to do the change
#cbox {
display:none;
}
.someDiv {
background: blue;
color: white;
width: 200px;
max-height: 100px;
overflow: hidden;
height: 100%;
transition-property: width, max-height;
transition-duration: 2000ms;
transition-timing-function: ease;
transition-delay: 0, 2000ms;
}
#cbox:checked + div {
width: 100%;
max-height: 1000px;
}
I have also writen the transition in a way that can save you some typing when using multiple properties; notice that I can write ease only once
fiddle

Answer 2

You should separate properties with comma, instead of writing them in same line, try this
CSS
-webkit-transition: width 200ms ease 0s, height 200ms ease 200ms;
-moz-transition: width 200ms ease 0s, height 200ms ease 200ms;
-ms-transition: width 200ms ease 0s, height 200ms ease 200ms;
-o-transition: width 200ms ease 0s, height 200ms ease 200ms;
transition: width 200ms ease 0s, height 200ms ease 200ms;