Подтвердить что ты не робот

CSS3-преобразования и переходы (Webkit)

Рассмотрим следующий fiddle

p {
  -webkit-transform: translate(-100%, 0);
     -moz-transform: translate(-100%, 0);
      -ms-transform: translate(-100%, 0);
       -o-transform: translate(-100%, 0);
          transform: translate(-100%, 0);
  -webkit-transition: transform 1s ease-in;
     -moz-transition: transform 1s ease-in;
       -o-transition: transform 1s ease-in;
          transition: transform 1s ease-in;
}

a:hover + p {
  -webkit-transform: translate(0, 0);
     -moz-transform: translate(0, 0);
      -ms-transform: translate(0, 0);
       -o-transform: translate(0, 0);
          transform: translate(0, 0);
}

Переход работает плавно в FF, но вообще нет перехода в Safari или Chrome (на моем Mac).

Имеет ли свойство перехода префикс или есть какая-то синтаксическая ошибка в моем коде?

4b9b3361

ОТВЕТЫ

Ответ 1

Добавьте префикс поставщика в переходы:

p {
  -webkit-transform: translate(-100%, 0);
     -moz-transform: translate(-100%, 0);
      -ms-transform: translate(-100%, 0);
       -o-transform: translate(-100%, 0);
          transform: translate(-100%, 0);
  -webkit-transition: -webkit-transform 1s ease-in; /* Changed here */ 
     -moz-transition: -moz-transform 1s ease-in;
       -o-transition: -o-transform 1s ease-in;
          transition: transform 1s ease-in;
}

a:hover + p {
  -webkit-transform: translate(0, 0);
     -moz-transform: translate(0, 0);
      -ms-transform: translate(0, 0);
       -o-transform: translate(0, 0);
          transform: translate(0, 0);
}

Обновление (05/06/2014)

Чтобы ответить на некоторые комментарии, причиной отказа -ms-transition является то, что он никогда не существовал.

Check:

Могу ли я использовать? Переходы,

Могу ли я использовать? Превращает,

Переходы MDN,

Преобразования MDN