Question

我一直在使用CSS3过渡很好，但这是我尝试过的第一个transform，它似乎没有遵循相同的规则。（注意：我现在只是在-moz进行测试....）

我想要实现的目标：

悬停li它的孩子.feat_tt动画下来20px
on de hover我希望它恢复到原来的位置

我的代码：

.feat_tt { top: -180px; -moz-transition: all 300ms ease-out;}
.feat_props li:hover .feat_tt { -moz-transform: translate(0, 20px); }

会发生什么：

动画在您悬停的第一个.feat_tt上运行。
在取消悬停时，该位置不会还原
在第一个之后悬停另一个.feat_tt，就像动画已经执行一样。（它们位于不同的li）

这里有一些示例html我正在使用它：

<ul class="feat_props">
    <li>
        <p>Barsham West Barns</p>
        <div class="feat_tt">Sleeps 44 people mofo!</div>
    </li>
    <li>
        <p>Barsham West Barns</p>
        <div class="feat_tt">Sleeps 44 people mofo!</div>
    </li>
    <li>
        <p>Barsham West Barns</p>
        <div class="feat_tt">Sleeps 44 people mofo!</div>
    </li>
</ul>

Answer 1

您的代码适用于Firefox 5.我所做的就是将您编写的所有内容转储到HTML5页面

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
.feat_tt { top: -180px; -moz-transition: all 300ms ease-out;}
.feat_props li:hover .feat_tt { -moz-transform: translate(0, 20px); }
</style>
</head>

<body>

<ul class="feat_props">
<li>
    <p>Barsham West Barns</p>
    <div class="feat_tt">Sleeps 44 people!</div>
</li>
<li>
    <p>Barsham West Barns</p>
    <div class="feat_tt">Sleeps 44 people!</div>
</li>
<li>
    <p>Barsham West Barns</p>
    <div class="feat_tt">Sleeps 44 people!</div>
</li>
</ul>
</body>
</html>

有关使用CSS3属性转换的信息，您可以查看http://www.w3schools.com/css3/css3_2dtransforms.asp

CSS3 - 为什么我的转换不起作用？

1 个答案: