От автора: приветствую вас в нашей серии уроков CSS от А до Я! В этой серии я расскажу вам про CSS значения и свойства, начинающиеся с различных букв алфавита. Иногда обучающего ролика бывает недостаточно, и в этой статье я дам вам пару быстрых советов по работе с keyframe анимацией.
K значит @keyframes
В этом уроке мы разберем способы обработки вендорных префиксов, а также покажем, как отрефакторить вашу @keyframes анимацию в более сжатый формат.
В этом видео на букву K мы много говорили о @keyframes анимации. Здесь же мы дадим пару очень полезных советов при работе с CSS анимацией, а также расскажем о настоящих или будущих экспериментальных свойствах.
Совет 1
При создании @keyframes анимации очень часто на определенных этапах у отдельных свойств используются одни и те же значения. Чтобы не растягивать длинный список из контрольных точек, можно просто записать их через запятую, как вы делаете с селекторами с одинаковыми свойствами и значениями.
|
1 2 3 4 5 6 7 8 9 |
@keyframes pulse { 0%, 50% {font-size: 10px;} 25%, 100% {font-size: 20px;} } /* то же самое, что */ h1, h2, h3 { font-family: 'Avenir', sans-serif; } |
Совет 2
CSS анимация имеет хорошую поддержку в браузерах. На момент написания статьи поддержка составляла 89.5%, и во всех браузерах @keyframes и свойство animation работали без префиксов.
Тем не менее, для обратной поддержки Safari 8 и iOS 8.4 и ниже вам придется использовать префикс –webkit, чтобы анимация работала. Как и все те крошечные изменения, которые необходимо произвести во множестве мест, добавление префикса вручную может сильно раздуть и усложнить ваш код. Такой подход может привести к человеческим ошибкам.
Есть два способа поддерживать код чистым и избежать необходимости ручных правок и повторений.
Можно воспользоваться безпрефиксной JavaScript библиотекой от Ли Вероу. Библиотека за вас добавит все префиксы. Вы пишите обычный код без префиксов, а скрипт запускается в браузере и вставляет все необходимые префиксы за вас. Скрипт проверяет поддержку конкретного свойства, которое используется на данной странице.
Также можно пойти путем Autoprefixer. Это постпроцессор CSS, который необходимо запустить после написания кода без префиксов. Зачастую идет в комплекте с таск раннерами типа Grunt или Gulp. Autoprefixer берет всю информацию с сайта Caniuse и определяет необходимые префиксы.
Лично я предпочитаю Autoprefixer с таск раннером Gulp и уже который месяц не прописываю вендорные префиксы вручную. Отличный совет по ускорению рабочего процесса, который работает для всех свойств, а не только для @keyframes!
Автор: Guy Routledge
Источник: //www.sitepoint.com/
Редакция: Команда webformyself.
