Проста анімація 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 є відмінним вибором, якщо ви хочете отримати декілька швидких ефектів, не роблячи самому брудної роботи.

CSS3анімація
SEO текст: Анімація з CSS3 є ефективним і зручним способом створення анімацій на веб-сайтах. Animate.css - це бібліотека, яка дозволяє додавати різноманітні анімаційні ефекти до ваших елементів HTML з легкістю. Оберіть бажаний ефект, додайте відповідні класи і насолоджуйтесь анімацією без зайвих зусиль.

Часті запитання