缓和过渡似乎不适用于延迟

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

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;

Answer 2

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