CSS transition changing height after page reload

I have a problem like that. On the main page I have only container with one child occupaying 75px of height. On the rest of the pages I have container with two childs, acting like rows- one on top, one underneath. The height is 75px also.

What I wanna do, is to add animation/transition to those childs changing height after user moves from main page to other page. How to do it? Tried simple transitions solution, but didn't work. Heres the code:

.container{
          height: 75px;
          .lh-display(flex); //lesshat library 
          .lh-flex-direction(column);
          }
.container .child1{
          .lh-transition(height 0.5s ease);  
          }
.container .child2{
          .lh-transition(height 0.5s ease);
          }

I left originally written code with less hat prefixed mixins, but they actually just smash all the -moz-webkit-o prefixes :)

Thank you in advance!