Why is my CSS3 transition delaying before it starts? -

either i've misunderstood how it's working, or isn't working. have following css:

transition-property: max-width; transition-timing-function: linear; transition-duration: 5s; transition-delay: 0s; 

what expect when click button, transitions starts , ends 5 seconds later.

what happens after clicked button, delays 3,5 seconds before transition starts , transition lasts 1,5 seconds. in all, 5 seconds.

if use transition-timing-function: ease-in; delays 4,5 seconds before transition starts.

i've been following the transition guide here.

what can in order transition start moment click button , last 5 seconds?

the delay seeing time takes animate through values don't result in visual change. depending on difference, can cause significant delay in visual animation. why max/min width/height avoided when doing transitions.

example of concept:

in snippet below, box has height of 600px , max-height of 1000px. in order animation change max-height 200px, has go through 400px of empty space before you'll see change. causes 'delay'.

document.getelementbyid('change').addeventlistener('click', function(){     document.getelementbyid('box').classname = 'box short';  });

.box{    margin:20px;    width:200px;    background:red;    height:600px;    max-height:1000px;    transition: max-height 5s linear;  }    .box.short{    max-height:200px;  }

<button id="change">change max height</button>    <div id="box" class="box"></div>