0,0
рейтинг
10 апреля 2012 в 03:10

Разработка → Полезные ссылки для изучения CSS анимации перевод

CSS*
Мы начали наблюдать много экспериментов над 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 анимации, и которая включает описание примеров кода для каждого из них.
Перевод: Chris Spooner
Александр Смолянинов @derSmoll
карма
108,5
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Самое читаемое Разработка

Комментарии (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
      Спасибо за ссылку :)
  • 0
    Вот еще очень хороший гайд «Using CSS3 Transitions, Transforms and Animation» — css3.bradshawenterprises.com/transitions/
  • 0
    Немного в оффтоп, но по поводу w3schools — w3fools.com/

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