How can I get the CSS-Transforms to work

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.