Полезные ссылки для изучения CSS анимации

Мы начали наблюдать много экспериментов над CSS3 анимацией и статьи о ней в 2011-м, но тогда поддержка этой анимации была ограничена браузерами на вебките. В середине 2011-го Firefox 5 тоже получил эту поддержку, а также мы можем ожидать ее в следующей реинкарнации Internet Explorer (10), поэтому сейчас идеальное время, чтобы разобраться с синтаксисом @keyframes (покадровой анимации). Этот пост предлагает краткий обзор 10-ти статей, в которых объясняется, как использовать это клевое CSS3 свойство, с примерами и демками.

CSS Анимация (CSS3 Animations)

^[1]

Ищете базовую информацию по CSS3 анимации? Сайт W3 Schools ^[1] обеспечит вас основными сведениями о правилах покадровой анимации @keyframes, поддержку браузерами, и различными доступными свойствами. Все это снабжено качественными и наглядными примерами.

Синтаксис покадровой анимации (Keyframe Animation Syntax)

^[2]

Если вы уже знакомы с работой CSS3 анимации и вам нужна просто быстрая шпаргалка, то вам определенно стоит ознакомиться с соответствующей страницей на сайте Криса Койера CSS-Tricks ^[2]. На ней можно найти множество примеров кода, который можно легко скопировать и вставить в свою таблицу стилей.

CSS3 Анимация (CSS3 Animations)

^[3]

Ричард Бредшоу (Richard Bradshaw) ^[3] составил крайне полезный сборник информации о различных аспектах CSS3 анимации. Страница по предлагаемой ссылке сфокусирована в основном на покадровой анимации @keyframes, но не пропустите также полезную информацию о переходах (transitions) и трансформациях (transforms) на том же сайте.

CSS Анимация: Принципы и Примеры (CSS Animation: Principles and Examples)

^[4]

Эта углубленная статья на Smashing Magazine ^[4] делает акцент на CSS3 анимацию, где используются традиционные принципы анимации, такие как сжимание и растяжение (‘squash and stretch’), которые помогают в создании более реалистических иллюзий.

Мастеркласс по CSS Анимации (A Masterclass in CSS Animation)

^[5]

Net magazine ^[5] предлагает тур по правилам и свойствам CSS3 анимации с использованием простых примеров, которые смогут в будущем помочь в создании интересных и прикольных эффектов.

Начинаем эксперименты над CSS3 Анимацией (Start Experimenting with CSS3 Animations)

^[6]

Ли Мунро (Lee Munroe) ^[6] был на высоте в 2010-ом, когда он опубликовал в своем блоке статью о CSS3 анимации. Его пример был сфокусирован на вендорных префиксих вебкита, но сам синтаксис остался неизменным. Свою статью он оканчивает, приводя примеры со всего интернета.

Звенящий колокольчик с помощью покадровой CSS-анимации (Ring a Bell with CSS Keyframe Animations)

^[7]

Это может звучать как простой пример, но это демо с покадровой CSS анимацией от Inspect Element ^[7] предлагает к использованию целый ряд различных свойств, которые способствуют реалистичной анимации.

Развлекаемся с CSS анимацией (Having Fun with CSS Animations)

^[8]

Самули Хаконими (Samuli Hakoniemi) ^[8] создал хитрых, но эффективный способ создания анимации с использованием правил @keyframes. Кроме того, что движущиеся прямоугольники и скачущие шары идеально подходят для изучения, демо вроде этой смогут помочь придумать замечательные идеи для применения этих анимаций в практике на ваших проектах в вебе.

Пятиминутное руководство по CSS Анимации (The Five-Minute Guide to CSS Animations)

^[9]

Предпоследняя статья из этой подборки принадлежит UBelly ^[9], который познакомил своих читателей с поддержкой CSS анимацией в Explorer 10 и предложил пятиминутной обзор основ терминологии.

Анимация с CSS: это легче, чем ты думаешь (Animation with CSS: It’s Easier Than You Think)

^[10]

И наконец, хорошо отформатированная статья от Van SEO Design ^[10], которая предлагает обзор различных свойств и правил, которые вы возможно захотите использовать в вашей CSS анимации, и которая включает описание примеров кода для каждого из них.

Автор: derSmoll