How can I get the CSS-Transforms to work - html

Question

I got a pretty annoying problem, looking at a transformation -> translate.
Currently, I am fading in my navigation "blocks" from right to the left.
Now, I want a hover effect on every single one, so when you hover over it, that the block translates to the right just a little bit.
For that I used this code:
.navpoint:hover {
-webkit-transform: translate(20px, 0px);
-moz-transform: translate(20px, 0px);
-o-transform: translate(20px, 0px);
-ms-transform: translate(20px, 0px);
transform: translate(20px, 0px);
}
This should actually work, but looking at the demo, the blocks aren't even bothered to move to the right.
Here is a demo
I have the feeling that something with my set up is not right, please have a look at my HTML setup first:
<div class="navigation">
<h2 class="animated fadeInRightBig1 navpoint one">Working process</h2>
<h2 class="animated fadeInRightBig2 navpoint two">Subscribe</h2>
<h2 class="animated fadeInRightBig3 navpoint three">Contact us</h2>
</div>
Explaination: the "animated" is the general animation, custom times and delays set in each of the "fadeInRightBig's".
The "navpoint" looks like this:
.navpoint {
padding-left:5px;
padding-right:5px;
margin-top:0px;
margin-bottom:1px;
border-right:solid;
border-color:#333;
border-width:4px;
background:#FC3;
cursor:pointer;
}
The "one/two/three" in my html is set as an underclass of navpointm, just like this:
.navpoint.one {
width:96.73202614379085%;
}
This is my setup, and I guess something is wrong with my Navpoint classes, but I don't know what.
It would be very, very kind if you could answer this question and help me.
Thank you very much in advance.

Answer 1

You could try using the transitions property for this effect:
.navpoint {
padding-left:5px;
padding-right:5px;
margin-top:0px;
margin-bottom:1px;
border-right:solid;
border-color:#333;
border-width:4px;
background:#FC3;
cursor:pointer;
transition:all 1s ease-in-out;
-webkit-transition:all 1s ease-in-out;
}
.navpoint:hover {
margin-left: 20px;
}
working example can be seen here: http://codepen.io/jonwelsh/pen/sfewj

Answer 2

From what I can tell, your slide-in animation is interfering with the transform you have set on :hover.
Not sure what the exact fix for that is (if there is a simple one) other than removing the animation class via Javascript (or perhaps altering the animation params a bit), but a simple way to fix this is to just change how the nav items animate on :hover.
Rather than using transform, just set a margin-left:
.nav.one:hover {
margin-left:20px;
}
You will get the same result. And it can be animated with CSS transitions.