- PVSM.RU - https://www.pvsm.ru -
Мы начали наблюдать много экспериментов над CSS3 анимацией и статьи о ней в 2011-м, но тогда поддержка этой анимации была ограничена браузерами на вебките. В середине 2011-го Firefox 5 тоже получил эту поддержку, а также мы можем ожидать ее в следующей реинкарнации Internet Explorer (10), поэтому сейчас идеальное время, чтобы разобраться с синтаксисом @keyframes
(покадровой анимации). Этот пост предлагает краткий обзор 10-ти статей, в которых объясняется, как использовать это клевое CSS3 свойство, с примерами и демками.
Ищете базовую информацию по CSS3 анимации? Сайт W3 Schools [1] обеспечит вас основными сведениями о правилах покадровой анимации @keyframes, поддержку браузерами, и различными доступными свойствами. Все это снабжено качественными и наглядными примерами.
Если вы уже знакомы с работой CSS3 анимации и вам нужна просто быстрая шпаргалка, то вам определенно стоит ознакомиться с соответствующей страницей на сайте Криса Койера CSS-Tricks [2]. На ней можно найти множество примеров кода, который можно легко скопировать и вставить в свою таблицу стилей.
Ричард Бредшоу (Richard Bradshaw) [3] составил крайне полезный сборник информации о различных аспектах CSS3 анимации. Страница по предлагаемой ссылке сфокусирована в основном на покадровой анимации @keyframes, но не пропустите также полезную информацию о переходах (transitions) и трансформациях (transforms) на том же сайте.
Эта углубленная статья на Smashing Magazine [4] делает акцент на CSS3 анимацию, где используются традиционные принципы анимации, такие как сжимание и растяжение (‘squash and stretch’), которые помогают в создании более реалистических иллюзий.
Net magazine [5] предлагает тур по правилам и свойствам CSS3 анимации с использованием простых примеров, которые смогут в будущем помочь в создании интересных и прикольных эффектов.
Ли Мунро (Lee Munroe) [6] был на высоте в 2010-ом, когда он опубликовал в своем блоке статью о CSS3 анимации. Его пример был сфокусирован на вендорных префиксих вебкита, но сам синтаксис остался неизменным. Свою статью он оканчивает, приводя примеры со всего интернета.
Это может звучать как простой пример, но это демо с покадровой CSS анимацией от Inspect Element [7] предлагает к использованию целый ряд различных свойств, которые способствуют реалистичной анимации.
Самули Хаконими (Samuli Hakoniemi) [8] создал хитрых, но эффективный способ создания анимации с использованием правил @keyframes. Кроме того, что движущиеся прямоугольники и скачущие шары идеально подходят для изучения, демо вроде этой смогут помочь придумать замечательные идеи для применения этих анимаций в практике на ваших проектах в вебе.
Предпоследняя статья из этой подборки принадлежит UBelly [9], который познакомил своих читателей с поддержкой CSS анимацией в Explorer 10 и предложил пятиминутной обзор основ терминологии.
И наконец, хорошо отформатированная статья от Van SEO Design [10], которая предлагает обзор различных свойств и правил, которые вы возможно захотите использовать в вашей CSS анимации, и которая включает описание примеров кода для каждого из них.
Автор: derSmoll
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/css3/5076
Ссылки в тексте:
[1] Image: http://www.w3schools.com/css3/css3_animations.asp
[2] Image: http://css-tricks.com/snippets/css/webkit-keyframe-animation-syntax/
[3] Image: http://css3.bradshawenterprises.com/animations/
[4] Image: http://coding.smashingmagazine.com/2011/09/14/the-guide-to-css-animation-principles-and-examples/
[5] Image: http://www.netmagazine.com/tutorials/masterclass-css-animations
[6] Image: http://www.leemunroe.com/css3-animations/
[7] Image: http://inspectelement.com/tutorials/ring-a-bell-with-css-keyframe-animations/
[8] Image: http://samuli.hakoniemi.net/having-fun-with-css-keyframes/
[9] Image: http://www.ubelly.com/2012/01/the-five-minute-guide-to-css-animations/
[10] Image: http://www.vanseodesign.com/css/animation/
Нажмите здесь для печати.