CSS Transition on Element position - css

Question

How do I transition the .menu-trigger from position top:12px, left: 0 to its final position top: 12px, left: 120px when the .active class is added on the header? Please note that when the .active class is added the .menu-trigger becomes position: fixed and moves out of the header. That is a requirement for what I am trying to solve.
var header = document.querySelector("header");
document.getElementById('test').onclick = function() {
header.classList.toggle('active');
}
body {
margin: 0;
padding: 0;
}
header {
display: flex;
height: 60px;
background: black;
margin-top: 120px;
}
.menu-trigger {
display: inline-block;
border: none;
color: white;
background: cyan;
height: 60px;
width: 60px;
font-size: 24px;
}
header.active .menu-trigger{
position: fixed;
top: 12px;
left: 120px;
right: auto;
bottom: auto;
}
#test {
margin-top: 24px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<header>
<button class="menu-trigger">
<span class="fa fa-bars"></span>
</button>
</header>
<button id="test">Test</button>

Answer 1

You can just have menu-trigger always be fixed and that way you get the position right, right away
position: fixed;
top: 120px;
then when active class is added all you have to do is change position left and not worry about top or setting to static as it already will be. make sure you either make top: 120px in the active or just remove it all together since it will already be set on the base style of menu-trigger here is the pen http://codepen.io/finalfreq/pen/RGgEkq