Статьи

Простая анимация CSS3 с Animate.css

Февраль 3, 2019

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

Animate.css делает кодирование немного более терпимым. Просто выберите эффект, посмотрите его в действии, загрузите код и добавьте пару классов к вашему HTML-элементу. Вы можете загрузить полный CSS-файл с 2500 строками или создать собственную сборку, используя нужные вам эффекты.

Animate.css был разработан Дэном Иденом , дизайнером и студентом из Манчестера, Великобритания:

Я работал над несколькими личными проектами с ключевыми кадрами анимации CSS3 и обнаружил, что повторяю код. Итак, я начал создавать библиотеку анимаций, которую я мог бы добавить по своему желанию. После того, как я сделал то, чем я был доволен, я выпустил код на GitHub, и он взлетел оттуда.

Люди любят анимацию!

Мы, конечно, делаем. Мой любимый на данный момент «шарнир» в разделе «Специальные» внизу. Очень круто. Я изо всех сил пытаюсь придумать вариант использования, но теперь могу применить его ко всем моим ссылкам!

Префиксный прогноз

Хотя префиксы могут быть неизбежным злом, Animate.css показывает, насколько они могут быть неуклюжими. Ключевые кадры и связанные с ними свойства преобразования должны быть определены со значениями -webkit, -moz, -ms, -o и без префиксов. Это приводит к большому количеству повторяющегося кода для конкретного браузера, который трудно поддерживать и отлаживать, например 


@-webkit-keyframes rollIn {
	0% { opacity: 0; -webkit-transform: translateX(-100%) rotate(-120deg); }
	100% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); }
}

@-moz-keyframes rollIn {
	0% { opacity: 0; -moz-transform: translateX(-100%) rotate(-120deg); }
	100% { opacity: 1; -moz-transform: translateX(0px) rotate(0deg); }
}

@-ms-keyframes rollIn {
	0% { opacity: 0; -ms-transform: translateX(-100%) rotate(-120deg); }
	100% { opacity: 1; -ms-transform: translateX(0px) rotate(0deg); }
}

@-o-keyframes rollIn {
	0% { opacity: 0; -o-transform: translateX(-100%) rotate(-120deg); }
	100% { opacity: 1; -o-transform: translateX(0px) rotate(0deg); }
}

@keyframes rollIn {
	0% { opacity: 0; transform: translateX(-100%) rotate(-120deg); }
	100% { opacity: 1; transform: translateX(0px) rotate(0deg); }
}

Предварительные парсеры CSS могут облегчить ситуацию, но они предназначены не для всех, и проекты должны постоянно обновляться по мере развития CSS3. Я быстро прихожу к выводу, что предложение Флориана Ривоала о нефиксированных свойствах, поддерживаемых с первого дня, является хорошим ходом.

Однако на данный момент Animate.css является отличным вариантом, если вы хотите получить пару быстрых эффектов, не выполняя грязную работу самостоятельно.

34
Share: