我怎样才能让 CSS 转换工作答案

【问题标题】：How can I get the CSS-Transforms to work我怎样才能让 CSS 转换工作
【发布时间】：2013-07-22 06:19:58
【问题描述】：

我遇到了一个非常烦人的问题，正在查看转换 -> 翻译。

目前，我的导航“块”从右到左逐渐消失。现在，我想要对每个单独的一个悬停效果，所以当你悬停在它上面时，块会向右平移一点点。

为此，我使用了以下代码：

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

这应该确实有效，但看看演示，块甚至都懒得向右移动。

这是demo

我感觉我的设置有问题，请先看看我的 HTML 设置：

<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>

说明：“animated”是“fadeInRightBig”中每个“fadeInRightBig”中设置的通用动画、自定义时间和延迟。

“导航点”如下所示：

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

}

我的 html 中的“一/二/三”设置为 navpointm 的下类，就像这样：

.navpoint.one {
width:96.73202614379085%;

}

这是我的设置，我猜我的 Navpoint 类有问题，但我不知道是什么。如果您能回答这个问题并帮助我，那就太好了。

非常感谢您。

【问题讨论】：

您的 webkit 动画（从右侧淡入）似乎干扰了翻译。

标签： html css transition translate-animation

【解决方案1】：

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

除了通过 Javascript 删除动画类（或者可能稍微更改动画参数）之外，不确定该问题的确切解决方法是什么（如果有简单的解决方法），但解决此问题的一种简单方法是更改导航项如何在 :hover 上进行动画处理。

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

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

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

【讨论】：

【解决方案2】：

您可以尝试使用 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

【讨论】：