Как добавить префиксы (преобразовать) в префиксы (ключевые кадры)?

Если я использую @keyframes для выполнения анимации преобразования, как мне расставить свои префиксы?

Если у меня есть следующее:

@keyframes animation {
  0%   { transform:rotate(0deg); }
  100% { transform:rotate(360deg); }
}

Нужно ли мне тогда добавлять все мои префиксы преобразования к каждому объявлению ключевого кадра? НАПРИМЕР:

@keyframes animation {
    0%   {
        -webkit-transform:rotate(0deg);
        -ms-transform:rotate(0deg);
        transform:rotate(0deg);
    }
    100% { 
        -webkit-transform:rotate(360deg);
        -ms-transform:rotate(360deg);
        transform:rotate(360deg);
    }
}

@-webkit-keyframes animation {
    0%   {
        -webkit-transform:rotate(0deg);
        -ms-transform:rotate(0deg);
        transform:rotate(0deg);
    }
    100% { 
        -webkit-transform:rotate(360deg);
        -ms-transform:rotate(360deg);
        transform:rotate(360deg);
    }
}

Это работает? Если это лучший способ сделать это или есть сокращенный/более быстрый способ? Я полагаю, что этот способ очень быстро будет выглядеть громоздким и ужасным даже с умеренно сложной анимацией.


css css-animations cross-browser vendor-prefix
person Mr DC    schedule 23.12.2015    source источник
comment
Многие разработчики используют для этого плагины Javascript или препроцессора. Проверьте PrefixFree или Autoprefixer... есть и другие.   -  person Paulie_D    schedule 23.12.2015

Ответы (1)


arrow_upward
2
arrow_downward

В общем, префиксы — это беспорядок, особенно когда речь идет о CSS-анимациях и преобразованиях. У меня есть исчерпывающее руководство по управлению префиксами для этих двух функций, которое вы можете найти здесь.

То, что у вас есть, конечно работает, но ненужно:

  • Браузеры, отличные от IE, в любом случае не распознают объявление -ms-transform, а версии IE, поддерживающие анимацию CSS из коробки, также поддерживают transform без префикса.

    Это означает, что -ms-transform просто не нужен вообще. Вы должны удалить все его экземпляры. Вам это действительно нужно только вне анимации CSS, где вы хотите, чтобы преобразования работали статически в IE9. Подробнее см. ссылку выше.

  • Анимации и преобразования были без префиксов в WebKit совсем недавно. Однако версии WebKit, которые поддерживают @keyframes без префикса, также поддерживают преобразования без префикса. Вы можете удалить объявления -webkit-transform из правила @keyframes.

  • Я бы не стал трогать объявления transform без префикса в обоих правилах. Префиксы у преобразований были немного раньше, чем у анимации, поэтому некоторые версии WebKit, требующие @-webkit-keyframes, поддерживают преобразования без префиксов.

Кроме того, правило без префикса должно быть последним. Это относится как к свойствам (например, transform), так и к at-правилам (например, @keyframes). Вот ваш CSS с указанными выше оптимизациями:

@-webkit-keyframes animation {
    0%   {
        -webkit-transform:rotate(0deg);
        transform:rotate(0deg);
    }
    100% { 
        -webkit-transform:rotate(360deg);
        transform:rotate(360deg);
    }
}

@keyframes animation {
    0%   {
        transform:rotate(0deg);
    }
    100% { 
        transform:rotate(360deg);
    }
}
person BoltClock    schedule 23.12.2015
comment
Большое спасибо; это ответило на мой вопрос и прояснило любые дополнительные вопросы, которые у меня могли возникнуть! - person Mr DC; 23.12.2015