CSS translate not working with flex-box element

Question

So I was recently trying to make an header in which I was using CSS flex property for the alignment of the elements.

Problem came when I tried to do some animations..