Ajuda na programação, respostas a perguntas / Html / CSS3 - por que minha transformação não está funcionando? - html, css, css3

CSS3 - por que minha transformação não está funcionando? - html, css, css3

Eu tenho usado as transições CSS3 bem, mas esta é a primeira transform Eu tentei e não parece jogar pelas mesmas regras. (nota: estou apenas testando -moz para agora....)

O que estou tentando alcançar:

no foco de um li é filho .feat_tt anima 20px
no de-hover eu quero voltar à sua posição original

Meu código:

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

O que acontece:

A animação é executada no primeiro .feat_tt você paira.
No de-hover, a posição não reverte
pairando outro .feat_tt depois do primeiro, é como se a animação já tivesse sido executada (eles estão separados li"s)

aqui está um exemplo de html que eu estou usando isso em:

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

Respostas:

0 para resposta № 1

Seu código funciona no Firefox 5. Tudo que fiz foi despejar tudo o que você escreveu em uma página 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>

Para obter informações sobre o uso da transformação da propriedade CSS3, você pode verificar http://www.w3schools.com/css3/css3_2dtransforms.asp