Problem With CSS3 Transitions In Firefox (codepen provided)

[pleek]

I'm having a problem using opacity transitions on anything that is rotated using CSS3. I have a div rotated -20 degrees and three paragraphs that transform from

margin-left:50px;
opacity:0;

to

margin-left:0px;
opacity:1;

 

This works fine on its own but when I put it inside the div that is rotated -20 degrees it produces a weird focusing effect when the transition is triggered. This only happens when I try to transition the opacity level.

 

CodePen - http://codepen.io/anon/full/uhCLn

 

In Chrome the transitions work great, but in firefox its like the text goes out of focus then refocus when the transition is complete. Is there anyway to fix this or is this another CSS compatibility issue?

[Mahngiel]

transitions require vendor prefixes (-webkit, -moz, -o, etc). this is because there is no standardized engine rendering method for the CSS property - which means there will be discrepancies on how it will be displayed.  For this reason, it is advised that you do not use these properties for anything outside of "play".

[pleek]

Okay thats what I figured. Okay second question, can you steer me in the right direction on how to change the css attributes of an object responsively (currently the effects are triggered by :hover) and achieve the same animation i'm currently using CSS3 transitions for?

 

Thanks for your help Mahngiel

[Mahngiel]

There are a million-and-one tutorials on responsive design out there on the webs. Alistapart gets a lot of linkbacks to it.

[pleek]

Okay I tried to do the same technique using jQuery to animate the opacity.

 

$('div.four').hover(function(){
$(this).find('p').animate({opacity:'1'},{queue:false,duration:500});
}, function(){
        $(this).find('p').animate({opacity:'0'},{queue:false,duration:500});
});

 

The animation is nice and smooth but I still get the same unfocused bug with all the text. Any other suggestions? It seems that any animation of the opacity while content is rotated produces this problem.