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



Крейг Баклер

Оригинал: http://www.sitepoint.com/animate-css-css3-animation

Перевод: Влад Мержевич

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

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

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

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

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

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

Затруднения с префиксами

Пока префиксы остаются необходимым злом, 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 является отличным выбором, если вы хотите получить несколько быстрых эффектов не делая самому грязную работ.

Статьи по теме

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.