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