CODEWITHSUNDEEP
jqueryhtmlcsscss-animations
hidanielle
hidanielle

Reputation: 594

CSS transform transition not animating in Firefox when class is applied through jQuery

I'm messing around with CSS3 animations and I can't seem to get this one working in Firefox.

The animation will trigger on hover or something of that sort, but I'm trying to apply a class on scroll through jQuery, and it's not triggering the animation, but it is applying the class. Here is a Codepen of the situation, working in Chrome but not FF. Any ideas?

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

Edit: So, I've found that if I apply the class directly to the H1 that I'm trying to animate, then it works properly. So it seems like it's not triggering animations on child elements of the element that has the class applied. Is there any other solution besides:

a) adding multiple classes to multiple elements considering i want things to happen on both b) using keyframe animations ?

Possible duplicate: Changing parent element's positioning prevents child element CSS3 transition 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);
}

Upvotes: 4

Views: 1574

Answers (1)

SVSchmidt
SVSchmidt

Reputation: 6527

DEMO (tested in Firefox and Chrome)

I've 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);

Upvotes: 1

Related Questions