Мы начали наблюдать много экспериментов над CSS3 анимацией и статьи о ней в 2011-м, но тогда поддержка этой анимации была ограничена браузерами на вебките. В середине 2011-го Firefox 5 тоже получил эту поддержку, а также мы можем ожидать ее в следующей реинкарнации Internet Explorer (10), поэтому сейчас идеальное время, чтобы разобраться с синтаксисом @keyframes (покадровой анимации). Этот пост предлагает краткий обзор 10-ти статей, в которых объясняется, как использовать это клевое CSS3 свойство, с примерами и демками.
CSS Анимация (CSS3 Animations)
Ищете базовую информацию по CSS3 анимации? Сайт W3 Schools обеспечит вас основными сведениями о правилах покадровой анимации @keyframes, поддержку браузерами, и различными доступными свойствами. Все это снабжено качественными и наглядными примерами.
Синтаксис покадровой анимации (Keyframe Animation Syntax)
Если вы уже знакомы с работой CSS3 анимации и вам нужна просто быстрая шпаргалка, то вам определенно стоит ознакомиться с соответствующей страницей на сайте Криса Койера CSS-Tricks. На ней можно найти множество примеров кода, который можно легко скопировать и вставить в свою таблицу стилей.
CSS3 Анимация (CSS3 Animations)
Ричард Бредшоу (Richard Bradshaw) составил крайне полезный сборник информации о различных аспектах CSS3 анимации. Страница по предлагаемой ссылке сфокусирована в основном на покадровой анимации @keyframes, но не пропустите также полезную информацию о переходах (transitions) и трансформациях (transforms) на том же сайте.
CSS Анимация: Принципы и Примеры (CSS Animation: Principles and Examples)
Эта углубленная статья на Smashing Magazine делает акцент на CSS3 анимацию, где используются традиционные принципы анимации, такие как сжимание и растяжение (‘squash and stretch’), которые помогают в создании более реалистических иллюзий.
Мастеркласс по CSS Анимации (A Masterclass in CSS Animation)
Net magazine предлагает тур по правилам и свойствам CSS3 анимации с использованием простых примеров, которые смогут в будущем помочь в создании интересных и прикольных эффектов.
Начинаем эксперименты над CSS3 Анимацией (Start Experimenting with CSS3 Animations)
Ли Мунро (Lee Munroe) был на высоте в 2010-ом, когда он опубликовал в своем блоке статью о CSS3 анимации. Его пример был сфокусирован на вендорных префиксих вебкита, но сам синтаксис остался неизменным. Свою статью он оканчивает, приводя примеры со всего интернета.
Звенящий колокольчик с помощью покадровой CSS-анимации (Ring a Bell with CSS Keyframe Animations)
Это может звучать как простой пример, но это демо с покадровой CSS анимацией от Inspect Element предлагает к использованию целый ряд различных свойств, которые способствуют реалистичной анимации.
Развлекаемся с CSS анимацией (Having Fun with CSS Animations)
Самули Хаконими (Samuli Hakoniemi) создал хитрых, но эффективный способ создания анимации с использованием правил @keyframes. Кроме того, что движущиеся прямоугольники и скачущие шары идеально подходят для изучения, демо вроде этой смогут помочь придумать замечательные идеи для применения этих анимаций в практике на ваших проектах в вебе.
Пятиминутное руководство по CSS Анимации (The Five-Minute Guide to CSS Animations)
Предпоследняя статья из этой подборки принадлежит UBelly, который познакомил своих читателей с поддержкой CSS анимацией в Explorer 10 и предложил пятиминутной обзор основ терминологии.
Анимация с CSS: это легче, чем ты думаешь (Animation with CSS: It’s Easier Than You Think)
И наконец, хорошо отформатированная статья от Van SEO Design, которая предлагает обзор различных свойств и правил, которые вы возможно захотите использовать в вашей CSS анимации, и которая включает описание примеров кода для каждого из них.
Автор: derSmoll
