0

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.

4

2 回答 2

0

据我所知，您的滑入式动画干扰了您在 :hover 上设置的变换。

除了通过 Javascript 删除动画类（或者可能稍微改变动画参数）之外，不知道确切的解决方法是什么（如果有一个简单的解决方法），但解决这个问题的一种简单方法是改变导航的方式项目动画：悬停。

而不是使用变换，只需设置一个margin-left：

.nav.one:hover {
    margin-left:20px;
}

你会得到同样的结果。它可以使用 CSS 过渡进行动画处理。

于 2013-07-23T09:31:20.957 回答
0

您可以尝试使用 transitions 属性来实现此效果：

.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;
}

工作示例可以在这里看到： http: //codepen.io/jonwelsh/pen/sfewj

于 2013-07-23T09:40:26.503 回答