CSS3 - почему мое преобразование не работает?

Я использую CSS3 переходы хорошо, но это первый transform Я пытался, и, кажется, он не играет по тем же правилам. (примечание: я просто тестирую в -moz теперь....)

Чего я пытаюсь добиться:

  • при наведении li это ребенок .feat_tt оживляет вниз на 20 пикселей
  • на 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"S)

Вот пример 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>
Источник

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

Источник
Другие вопросы по тегам