CSS transition transition is not animated in Firefox when a class is applied through jQuery

Question

I was messing around with CSS3 animations and I can't get this to work in Firefox.

The animation will fire on hover or something like that, but I'm trying to apply the class to scroll through jQuery and not start the animation, but it uses the class. Here is a codepen situation working in Chrome but not FF. Any ideas?

http://codepen.io/anon/pen/uvkaq

Edit: So, I found that if I applied the class directly to H1, which I am trying to animate, it works correctly. Therefore, it seems that this does not cause the animation of the children of the element that the class applies. Is there any other solution:

a) adding multiple classes to multiple elements, given that I want things to happen on both b) using keyframe animation

Possible duplicate: Changing the location of the parent element prevents the CSS3 transition of the child element in Firefox

HTML:

<header>
  <h1>Hello world</h1>
</header>

CSS

body {
  height: 2000px;
}

header {
  background-color: teal;
  width: 100%;
  height: 5em;
  overflow: hidden;
}

h1 {
  -webkit-transform: translateX(-160px);
     -moz-transform: translateX(-160px);
      -ms-transform: translateX(-160px);
       -o-transform: translateX(-160px);
          transform: translateX(-160px);
  -webkit-transition: -webkit-transform 1s;
     -moz-transition:    -moz-transform 1s;
      -ms-transition:     -ms-transform 1s;
       -o-transition:      -o-transform 1s;
          transition:         transform 1s;
}

.scrolled {
  position: fixed;
}

.scrolled h1 {
  -webkit-transform: translateX(0px);
     -moz-transform: translateX(0px);
      -ms-transform: translateX(0px);
       -o-transform: translateX(0px);
          transform: translateX(0px);
}

Answer 1

DEMO (tested in Firefox and Chrome)

I made the following changes:

CSS

header.scrolled {
    position: fixed;
}

h1.scrolled {
    -webkit-transform: translateX(0px);
       -moz-transform: translateX(0px);
        -ms-transform: translateX(0px);
         -o-transform: translateX(0px);
            transform: translateX(0px);
}

Javascript

After $("header").addClass("scrolled");add

setTimeout(function() {
    $("h1").addClass("scrolled");
},10);