css - Element centered with translate(-50%, -50%) - transition not working -

i have div:

<div class="element"> </div> 

which centered on screen using these css properties:

.element {     position: absolute;     top: 50%;     left: 50%;     transform: translate(-50%, -50%); } 

now want div change height after adding class

.bigger {     height: 80%; } 

but want animate, added transition property:

.element {     position: absolute;     top: 50%;     left: 50%;     transform: translate(-50%, -50%);     transition: height .4s ease-in-out; } 

however height isn't animated after adding 'bigger' class. how working? note use sass , jeet grid system center div (using @include align(b)). here working codepen - codepen

  transition: height .4s ease-in-out, transform .4s ease in-out; 

change to:

  transition: height .4s ease-in-out, transform .4s ease-in-out; 

the transition-timing-function ease-in-out not ease in-out