Помогите, плохо отображаются CSS3 hover эффекты!

d1nk · №1

Здравствуйте!

Нашел для своего сайта вот такие анимационные блоки:
http://tympanus.net/Tutorials/OriginalHoverEffects/
реализовал их, в Google chrome работают отменно, но вот в Mozilla Firefox они отображаются с какими то "глюками", их сложно описать, проще самому увидеть перейдя по ссылке используя Мозиллу.

В CSS это выглядит примерно так (не полный код):

Выделить код

Код:

.menu ul li {
  display: inline-block;
  position: relative;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: -webkit-transform;
  transition-property: transform;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}

Я находил информацию, что нужно добавлять префикс -moz- для правильной работы анимации в Мозилле.
То есть, чтобы всё заработало, мне достаточно добавить ниже всё тоже самое, только с -moz- вместо -webkit- ?
Должно быть что-то вроде этого?:

Выделить код

Код:

.menu ul li {
  display: inline-block;
  position: relative;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  transition-property: transform;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-transform: translateZ(0);
  -moz-tap-highlight-color: rgba(0, 0, 0, 0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}

(Исправьте, пожалуйста, если не так)

Если мои рассуждения не верны, прошу вас помочь мне в решении этой задачи. Спасибо!

Отредактировано d1nk (05-04-2015 18:31:05)

turbot · №2

Я никаких глюков по ссылке не наблюдаю. Впрочем, у меня ночнушка, может какие-то используемые в стиле свойства (из не перечисленных вами) еще не поддерживаются в стабильной фф. Но из перечисленных - ни один не нуждается в префиксах. Достаточно просто: transition, transition-duration, transition-property, transform. Только -webkit-tap-highlight-color - не имеет аналогов. Это вообще какая-то самодеятельность, без аналогов в спецификациях w3c. Но беглое гугление предлагает замену.

А вообще, список поддерживаемых фф (по версиям) свойств css, можно смотреть здесь: с префиксами/без.

d1nk · №3

turbot, Спасибо вам большое за ответ.
У меня тоже глюков не было на другом компьютере. Но разница в том, что на одном компьютере я установил мозиллу в пятницу, самую новую версию с оффсайта, а на втором сегодня, тоже самую новую, и глюки есть только в последнем варианте. Не знаю, может за полтора дня выпустили новую версию, в которой они присутствуют . Проверю еще раз завтра с первого компа, мб с установкой сегодняшней версии и там будут глюки.
Ну ладно, спасибо за полезные ссылки

Добавлено 05-04-2015 19:15:42
А по поводу глюков, появляются вот такие штуки по краям текста на секунду, и пропадают.

Отредактировано d1nk (05-04-2015 19:28:43)

Полезная информация

№105-04-2015 18:24:17