Эта статья является частью нашей серии CSS AtoZ. Вы можете найти другие записи серии здесь .
Смотрите полный скриншот и расшифровку стенограммы ключевых кадров здесь .
Добро пожаловать в нашу серию AtoZ CSS! В этой серии я буду изучать различные значения CSS (и свойства), каждое из которых начинается с другой буквы алфавита. Мы знаем, что иногда скринкастов просто недостаточно, в этой статье я добавил новый быстрый совет / урок об анимации ключевых кадров для вас.
K для @keyframes
В этой @keyframes мы рассмотрим способы обработки префиксов поставщиков и краткий совет по реорганизации ваших @keyframes в более сжатый формат.
Мы много говорили о @keyframes в видео о букве K. Вот несколько дополнительных советов, которые могут оказаться полезными при работе с CSS-анимацией (и любыми текущими или будущими экспериментальными свойствами).
Совет 1
При настройке ключевых кадров для анимации довольно часто для определенных точек анимации используются одни и те же значения для определенных свойств. Вместо длинного списка ключевых кадров вы можете объединить их в список через запятую, как если бы вы использовали селекторы с одинаковыми свойствами и значениями.
@keyframes pulse { 0%, 50% {font-size: 10px;} 25%, 100% {font-size: 20px;} } /* just like */ h1, h2, h3 { font-family: 'Avenir', sans-serif; }
Совет 2
Поддержка CSS-анимации очень хорошая — на момент написания @keyframes поддержка составляла 89,5%, и во всех поддерживающих браузерах и @keyframes и animation префикса.
Однако для обеспечения обратной совместимости с Safari 8 и iOS 8.4 и ниже вам понадобятся префиксы -webkit vendor, чтобы гарантировать, что ваши анимации действительно воспроизводятся. Добавление их вручную может сделать ваш код раздутым и трудным в обслуживании, поскольку каждое крошечное изменение необходимо будет реплицировать в нескольких местах. Это может быть склонно к человеческой ошибке, которая никогда не бывает хорошей.
Есть два способа сделать ваш код красивым и чистым, а также избежать ручной задачи дублирования.
Вы можете использовать библиотеку JavaScript без префиксов от Lea Verou . Это позаботится обо всех префиксах для вас, поэтому вы просто пишете код без префиксов, и скрипт запускается в браузере и внедряет все необходимые префиксы для вас на основе поддержки функций в используемом в данный момент браузере.
Другой вариант — использовать Autoprefixer . Это постпроцессор CSS, который вы запускаете после того, как закончите писать свой код без префиксов — обычно как часть автоматизированного запуска задач, такого как Grunt или Gulp . Autoprefixer использует информацию из Caniuse, чтобы определить, какие префиксы требуются.
Я лично использую Autoprefixer с заданием Gulp и не писал префикса поставщика в течение нескольких месяцев. Это отличный совет, чтобы ускорить ваш рабочий процесс и работает для всех свойств CSS, а не только для @keyframes !