Переход CSS не работает на верхнем свойстве в FF

У меня есть следующий HTML:

<ul>
    <li>
        <a href="#">
            <h2>title</h2>
        </a>
    </li>
     <li>
        <a href="#">
            <h2>title</h2>
        </a>
    </li>
     <li>
        <a href="#">
            <h2>title</h2>
        </a>
    </li>
</ul>

CSS

ul {
    list-style: none;  
    text-align: center;
}
ul li {
    position: relative;
    float: right;
    margin-right: 20px;
    width: 30%;
}
ul li {
    transition: all 0.3s;
}
ul li:hover {
    top: -10px;
}
ul li> a{
    color: red;
}

Вопрос в том, что переход не работает с moz, он работает на webkit. Как реализовать это в кросс-браузере?

DEMO

Ответы

Ответ 1

Браузеры не применяют transition к свойству, если начальное значение для него не указано в элементе. Следовательно, добавление top: 0px в ul li решит проблему.

ul {
  list-style: none;
  text-align: center;
}
ul li {
  position: relative;
  float: right;
  margin-right: 20px;
  top: 0px; /* this line was added */
  width: 30%;
}
ul li {
  transition: all 0.3s;
}
ul li:hover {
  top: -10px;
}
ul li> a {
  color: red;
}

<!-- Library included just to avoid prefixes so that users with older browser can view -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

<ul>
  <li>
    <a href="#">
      <h2>title</h2>
    </a>
  </li>
  <li>
    <a href="#">
      <h2>title</h2>
    </a>
  </li>
  <li>
    <a href="#">
      <h2>title</h2>
    </a>
  </li>
</ul>

Ответ 2

Я не знаю, почему top свойство css действует странно, чтобы сделать анимацию в firefox, даже если оно указано как свойство поведения анимации в CSS.

В любом случае использование margin-top вместо top отлично работает в Firefox.

Но я хотел бы предложить перейти к transform свойствам "translateX" и "translateY" вместо использования позиционирования со следующего раза, потому что он эффективен. (рекомендуется Paul Irish)

Ответ 3

Попробуйте следующее:

ul li { 
    /* standard property and other vendor prefixes */
    -moz-transition: -moz-transform 0.3s;
}
ul li:hover {
    /* standard property and other vendor prefixes */
    -moz-transform: translateY(-10px);
}

Ответ 4

Это определенно не декларация перехода или что-то еще в написанном CSS --- попробуйте добавить opacity:.5 в состояние зависания, и вы увидите, что он прекрасно одинаков.

Итак, по какой-то причине Firefox не переводит свойство top. Честно говоря, я пока не знаю, почему. Моим решением на данный момент было бы использовать CSS-преобразование для перемещения элемента вверх на 10 пикселей вместо:

ul li:hover {
    -o-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    -moz-transform: translateY(-10px);
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);

}

Это успешно анимируется в Firefox, как вы можете видеть здесь:

http://jsfiddle.net/y7yQQ/7/