/ / CSS3 - dlaczego moja transformacja nie działa? - html, css, css3

CSS3 - dlaczego moja transformacja nie działa? - html, css, css3

Używałem przejść CSS3 dobrze, ale to jest pierwsze transform Próbowałem i nie wydaje się, że grają na tych samych zasadach. (uwaga: ja po prostu testuję -moz Na razie....)

Co próbuję osiągnąć:

  • po najechaniu wskaźnikiem myszy li to dziecko .feat_tt animuje w dół 20 pikseli
  • przy de-hover chcę, aby powrócił do swojej pierwotnej pozycji

Mój kod:

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

Co się dzieje:

  • Animacja działa na pierwszym .feat_tt najedziesz.
  • Po odstrojeniu pozycja nie powraca
  • najechanie innym .feat_tt po pierwszym, jest tak, jakby animacja została już wykonana (są one w oddzielnych li"s)

oto przykładowy html, który używa tego na:

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

Odpowiedzi:

0 dla odpowiedzi № 1

Twój kod działa w Firefoksie 5. Wszystko, co zrobiłem, to zrzuciłem wszystko, co napisałeś na stronę 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>

Aby uzyskać informacje na temat korzystania z transformacji właściwości CSS3, możesz sprawdzić http://www.w3schools.com/css3/css3_2dtransforms.asp