Мы начали наблюдать много экспериментов над CSS3 анимацией и статьи о ней в 2011-м, но тогда поддержка этой анимации была ограничена браузерами на вебките. В середине 2011-го Firefox 5 тоже получил эту поддержку, а также мы можем ожидать ее в следующей реинкарнации Internet Explorer (10), поэтому сейчас идеальное время, чтобы разобраться с синтаксисом
![](https://habrastorage.org/r/w1560/storage2/e8d/621/a94/e8d621a94537fc9f26ae59e2c907e99e.png)
![](https://habrastorage.org/r/w780q1/storage2/437/942/f96/437942f9610c3cf442a937bdaa9f0ddf.jpg)
Ищете базовую информацию по CSS3 анимации? Сайт W3 Schools обеспечит вас основными сведениями о правилах покадровой анимации @keyframes, поддержку браузерами, и различными доступными свойствами. Все это снабжено качественными и наглядными примерами.
![](https://habrastorage.org/r/w780q1/storage2/61c/4cc/e3c/61c4cce3cf3e8555b642d050a5d4318c.jpg)
Если вы уже знакомы с работой CSS3 анимации и вам нужна просто быстрая шпаргалка, то вам определенно стоит ознакомиться с соответствующей страницей на сайте Криса Койера CSS-Tricks. На ней можно найти множество примеров кода, который можно легко скопировать и вставить в свою таблицу стилей.
![](https://habrastorage.org/r/w780q1/storage2/db4/0c0/651/db40c0651d719706ba8b4e229e3c4621.jpg)
Ричард Бредшоу (Richard Bradshaw) составил крайне полезный сборник информации о различных аспектах CSS3 анимации. Страница по предлагаемой ссылке сфокусирована в основном на покадровой анимации @keyframes, но не пропустите также полезную информацию о переходах (transitions) и трансформациях (transforms) на том же сайте.
![](https://habrastorage.org/r/w780q1/storage2/e83/5e6/305/e835e63058a31e8124c6e906c1c7212c.jpg)
Эта углубленная статья на Smashing Magazine делает акцент на CSS3 анимацию, где используются традиционные принципы анимации, такие как сжимание и растяжение (‘squash and stretch’), которые помогают в создании более реалистических иллюзий.
![](https://habrastorage.org/r/w780q1/storage2/c9a/9de/421/c9a9de421c0145d9eeaa7717343e8f17.jpg)
Net magazine предлагает тур по правилам и свойствам CSS3 анимации с использованием простых примеров, которые смогут в будущем помочь в создании интересных и прикольных эффектов.
![](https://habrastorage.org/r/w780q1/storage2/cc9/6c4/892/cc96c489212964e4595c43af3b09c378.jpg)
Ли Мунро (Lee Munroe) был на высоте в 2010-ом, когда он опубликовал в своем блоке статью о CSS3 анимации. Его пример был сфокусирован на вендорных префиксих вебкита, но сам синтаксис остался неизменным. Свою статью он оканчивает, приводя примеры со всего интернета.
![](https://habrastorage.org/r/w780q1/storage2/cbf/3ca/91e/cbf3ca91e097a51802f5e9f7b77020aa.jpg)
Это может звучать как простой пример, но это демо с покадровой CSS анимацией от Inspect Element предлагает к использованию целый ряд различных свойств, которые способствуют реалистичной анимации.
![](https://habrastorage.org/r/w780q1/storage2/ae0/008/867/ae00088673ad35d823b7dd2edfa96da8.jpg)
Самули Хакониеми (Samuli Hakoniemi) создал хитрых, но эффективный способ создания анимации с использованием правил @keyframes. Кроме того, что движущиеся прямоугольники и скачущие шары идеально подходят для изучения, демо вроде этой смогут помочь придумать замечательные идеи для применения этих анимаций в практике на ваших проектах в вебе.
![](https://habrastorage.org/r/w780q1/storage2/f3b/b95/26c/f3bb9526c7350446ea047ed39aed875c.jpg)
Предпоследняя статья из этой подборки принадлежит UBelly, который познакомил своих читателей с поддержкой CSS анимацией в Explorer 10 и предложил пятиминутной обзор основ терминологии.
![](https://habrastorage.org/r/w780q1/storage2/6da/cbe/a08/6dacbea08feb240cfbb82315af6bd3d2.jpg)
И наконец, хорошо отформатированная статья от Van SEO Design, которая предлагает обзор различных свойств и правил, которые вы возможно захотите использовать в вашей CSS анимации, и которая включает описание примеров кода для каждого из них.
@keyframes
(покадровой анимации). Этот пост предлагает краткий обзор 10-ти статей, в которых объясняется, как использовать это клевое CSS3 свойство, с примерами и демками.![](https://habrastorage.org/storage2/e8d/621/a94/e8d621a94537fc9f26ae59e2c907e99e.png)
CSS Анимация (CSS3 Animations)
![](https://habrastorage.org/storage2/437/942/f96/437942f9610c3cf442a937bdaa9f0ddf.jpg)
Ищете базовую информацию по CSS3 анимации? Сайт W3 Schools обеспечит вас основными сведениями о правилах покадровой анимации @keyframes, поддержку браузерами, и различными доступными свойствами. Все это снабжено качественными и наглядными примерами.
Синтаксис покадровой анимации (Keyframe Animation Syntax)
![](https://habrastorage.org/storage2/61c/4cc/e3c/61c4cce3cf3e8555b642d050a5d4318c.jpg)
Если вы уже знакомы с работой CSS3 анимации и вам нужна просто быстрая шпаргалка, то вам определенно стоит ознакомиться с соответствующей страницей на сайте Криса Койера CSS-Tricks. На ней можно найти множество примеров кода, который можно легко скопировать и вставить в свою таблицу стилей.
CSS3 Анимация (CSS3 Animations)
![](https://habrastorage.org/storage2/db4/0c0/651/db40c0651d719706ba8b4e229e3c4621.jpg)
Ричард Бредшоу (Richard Bradshaw) составил крайне полезный сборник информации о различных аспектах CSS3 анимации. Страница по предлагаемой ссылке сфокусирована в основном на покадровой анимации @keyframes, но не пропустите также полезную информацию о переходах (transitions) и трансформациях (transforms) на том же сайте.
CSS Анимация: Принципы и Примеры (CSS Animation: Principles and Examples)
![](https://habrastorage.org/storage2/e83/5e6/305/e835e63058a31e8124c6e906c1c7212c.jpg)
Эта углубленная статья на Smashing Magazine делает акцент на CSS3 анимацию, где используются традиционные принципы анимации, такие как сжимание и растяжение (‘squash and stretch’), которые помогают в создании более реалистических иллюзий.
Мастеркласс по CSS Анимации (A Masterclass in CSS Animation)
![](https://habrastorage.org/storage2/c9a/9de/421/c9a9de421c0145d9eeaa7717343e8f17.jpg)
Net magazine предлагает тур по правилам и свойствам CSS3 анимации с использованием простых примеров, которые смогут в будущем помочь в создании интересных и прикольных эффектов.
Начинаем эксперименты над CSS3 Анимацией (Start Experimenting with CSS3 Animations)
![](https://habrastorage.org/storage2/cc9/6c4/892/cc96c489212964e4595c43af3b09c378.jpg)
Ли Мунро (Lee Munroe) был на высоте в 2010-ом, когда он опубликовал в своем блоке статью о CSS3 анимации. Его пример был сфокусирован на вендорных префиксих вебкита, но сам синтаксис остался неизменным. Свою статью он оканчивает, приводя примеры со всего интернета.
Звенящий колокольчик с помощью покадровой CSS-анимации (Ring a Bell with CSS Keyframe Animations)
![](https://habrastorage.org/storage2/cbf/3ca/91e/cbf3ca91e097a51802f5e9f7b77020aa.jpg)
Это может звучать как простой пример, но это демо с покадровой CSS анимацией от Inspect Element предлагает к использованию целый ряд различных свойств, которые способствуют реалистичной анимации.
Развлекаемся с CSS анимацией (Having Fun with CSS Animations)
![](https://habrastorage.org/storage2/ae0/008/867/ae00088673ad35d823b7dd2edfa96da8.jpg)
Самули Хакониеми (Samuli Hakoniemi) создал хитрых, но эффективный способ создания анимации с использованием правил @keyframes. Кроме того, что движущиеся прямоугольники и скачущие шары идеально подходят для изучения, демо вроде этой смогут помочь придумать замечательные идеи для применения этих анимаций в практике на ваших проектах в вебе.
Пятиминутное руководство по CSS Анимации (The Five-Minute Guide to CSS Animations)
![](https://habrastorage.org/storage2/f3b/b95/26c/f3bb9526c7350446ea047ed39aed875c.jpg)
Предпоследняя статья из этой подборки принадлежит UBelly, который познакомил своих читателей с поддержкой CSS анимацией в Explorer 10 и предложил пятиминутной обзор основ терминологии.
Анимация с CSS: это легче, чем ты думаешь (Animation with CSS: It’s Easier Than You Think)
![](https://habrastorage.org/storage2/6da/cbe/a08/6dacbea08feb240cfbb82315af6bd3d2.jpg)
И наконец, хорошо отформатированная статья от Van SEO Design, которая предлагает обзор различных свойств и правил, которые вы возможно захотите использовать в вашей CSS анимации, и которая включает описание примеров кода для каждого из них.