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

http://line25.com/articles/useful-links-for-learning-css-keyframes-animation
  • Перевод
Мы начали наблюдать много экспериментов над 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 анимации, и которая включает описание примеров кода для каждого из них.
Метки:
Поделиться публикацией
Комментарии 10
  • –3
    Добавил в избранное, возможно пригодится.
    • 0
      Так и вижу тысячу с лишним человек, занёсших этот пост в избранное, и сообщивших об этом в комментариях. И ещё шестьдесят с гаком, написавших "+1".
    • 0
      Кажется, это довольно сложно заблокировать в браузере — разве что целиком CSS отключить.
      • 0
        Хватит просто добавления стилей, в конец страницы, например через плагин Stylebot (Chrome), ну или всегда можно написать свой :)

        <style>
        * {
            animation: none !important;
            transition: none !important;
        }
        </style>


        + префиксы по вкусу

        Нагрузочки добавит, но подозреваю что не больше чем любой другой плагин работающий со странницой, явно не больше чем AdBlock.
        • +3
          Достаточно использовать IE8/9 для серфинга по инету — и никакой головной боли с тяжелыми анимациями. :)
          • +1
            IE6 и ничего не надо блокировать
          • 0
            Могу порекомендовать ещё easings.net — список и инструкция по использованию easing-функций.
          • 0
            Вот еще очень хороший гайд «Using CSS3 Transitions, Transforms and Animation» — css3.bradshawenterprises.com/transitions/
            • 0
              Немного в оффтоп, но по поводу w3schools — w3fools.com/

              Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.