Требуются ли браузерные префиксы для всех версий ключевых кадров анимации? - PullRequest
Новая
       92

Требуются ли браузерные префиксы для всех версий ключевых кадров анимации?

0 голосов
/ 14 октября 2018

Если дизайнер использует необычную анимацию CSS и надеется иметь функциональность в старых и новых браузерах, мы обычно создаем разделы @keyframes и @ -webkit-keyframes.Большинство примеров, которые я видел, используют css без префиксов и браузер с префиксом css в обоих ключевых кадрах, но это необходимо. 

@keyframes coolEffect {
  -webkit-transform: some value;
  transform: some value;
  -webkit-animation-timing-function: some value;
  animation-timing-function: some value;
}
@-webkit-keyframes coolEffect {
  -webkit-transform: some value;
  transform: some value;
  -webkit-animation-timing-function: some value;
  animation-timing-function: some value;
}

Нужны ли нам не префиксные значения в @ -webkit-keyframes, так какбраузер, использующий это, также будет использовать -webkit- с префиксом css?И также, поскольку мы используем @ -webkit-keyframes, нужно ли включать -webkit- с префиксом css в основные @keyframes?Будет ли более простая уменьшенная версия работать одинаково хорошо? 

@keyframes coolEffect {
  transform: some value;
  animation-timing-function: some value;
}
@-webkit-keyframes coolEffect {
  -webkit-transform: some value;
  -webkit-animation-timing-function: some value;
}

Чтобы уточнить, я не спрашиваю о том, что будет работать для моего конкретного веб-сайта, я спрашиваю о функциональности и будет ли работать второй пример кодатак же, как пример кода.

Спасибо.

Ответы [ 2 ]

0 голосов
/ 14 октября 2018

Из моего ответа на этот похожий вопрос :

  • Браузеры на основе WebKit (включая Opera 15 и более поздние версии) по-прежнему требуют префикс -webkit- для анимации сегодняи преобразования не имеют префикса в последних версиях Chrome.Для обеих функций вам понадобится префикс.

(Преобразования не имели префикса в Chrome 36; анимация не была префиксом до Chrome 43. Обе функции были без префикса одновременно в Safari 9 так что вам не нужно беспокоиться о перекрытии с префиксом / без префикса в Safari.)

В двух словах, хотя ваши два примера не обеспечивают одинаковую функциональность, нет смысла включать любые префиксные свойства в @-webkit-keyframes так как большинству браузеров WebKit, которые зависят от префикса at-rule, никогда не понадобятся свойства без префикса.В частности, из нашего обсуждения в чате :

Вы можете потерять объявление без префикса [animation-timer-function].@keyframes находится в том же семействе, что и свойства animation- *, и ни один из существующих браузеров не поддерживает один без префикса без другого

Что касается преобразований, только очень немногие браузеры одновременно поддерживают преобразования без префиксов и требуют префиксов для анимаций.Эти браузеры все еще поддерживают префиксные преобразования, поэтому аналогичным образом вы можете потерять нефиксированные преобразования в @ -webkit-keyframes

Обратите внимание на разницу между «support» и «require»

Итак, кодвторой образец - это все, что вам нужно.Это на 40% меньше , чем пример кода, с потерей функциональности без .40% - это большая сделка.Единственное изменение, которое я хотел бы сделать, это переместить @-webkit-keyframes правило вверх: 

@-webkit-keyframes coolEffect {
  -webkit-transform: some value;
  -webkit-animation-timing-function: some value;
}
@keyframes coolEffect {
  transform: some value;
  animation-timing-function: some value;
}

Читатели также могут быть заинтересованы в моих комментариях к Autoprefixer:

Я предполагаю, что Autoprefixer видит, чтоChrome 36-42 поддерживает преобразования без префиксов, но требует анимации с префиксом, поэтому он помещает преобразование в @ -webkit-keyframes.Я не думаю, что это хороший подход.Это излишне удваивает объявления преобразования.Все эти версии Chrome до сих пор понимают -webkit-transform, поэтому может также придерживаться того, что

Autoprefixer хорош для тех, кто просто не хочет беспокоиться о префиксах или проводит все исследования, необходимые длядействительно оптимизируйте их таблицы стилей

Если вы хотите оптимизировать свою таблицу стилей, вам нужно будет провести немало исследований, чтобы выяснить, где нужны префиксы, а где нет, где нужны объявления без префиксов и гдевы можете оставить их и т. д. Префиксы в любом случае - боль;)

0 голосов
/ 14 октября 2018

Нет.Все современные браузеры, даже начиная с IE10, поддерживают анимацию без префиксов.( источник )

...