Оригинал: cssanimation.rocks/css-animation-101
Перевод: Влад Мержевич
Скажи мне — и я забуду. Покажи мне — и я запомню. Дай мне сделать — и я научусь.
Бенджамин Франклин
Добро пожаловать в «CSS-анимацию для начинающих» и спасибо за выбор этой книги.
Я рад, что вы решили изучить CSS-анимацию. Эта книга представляет собой простое и увлекательное введение в данную тему и, надеюсь, она окажется для вас полезной. Мы познакомимся с переходами и анимацией в CSS и к концу книги у вас будет хорошее понимание CSS-анимации, а также инструментов для создания и экспериментов с анимацией.
Мы изучим как теоретические, так и практические примеры, научимся легко создавать собственную рабочую среду и рассмотрим множество примеров анимации.
Привет, меня зовут Донован
Я пишу статьи о CSS и другие темы уже более десяти лет. Также я занимаюсь дизайном и разработкой веб-сайтов с конца 90-х годов. В последнее время я пишу для Smashing Magazine, Net Magazine, Tuts+, Adobe Inspire и др. Я публикую случайные материалы на Hop.ie, а в этом году писал руководства на CSSAnimation.rocks, посвящённые продвинутым и полезным анимациям в браузере.
В свободное время я работаю дизайнером и фронтенд-разработчиком и очень люблю сочетать в дизайне принципы UX и забавные анимации. По вечерам я пишу в блоги и стараюсь быть в курсе того, что происходит в мире веб-дизайна.
Эта книга представляет собой введение в CSS-анимацию, но попутно мы рассмотрим больше тем. Цель состоит в том, чтобы понять, для чего нужны свойства transition и animation, как они работают, и увидеть их в действии.
К концу этой книги вы будете достаточно уверены в себе, чтобы начать применять анимацию в своих проектах.
Структура книги
Вот что мы будем рассматривать.
Первое: что такое анимация? Мы рассмотрим, зачем нужна анимация. Мы также познакомимся со свойствами transition и animation и источниками вдохновения.
Затем: всё о свойстве transition. Мы узнаем, как работают переходы и какими свойствами можно управлять для изменения движения.
После этого: мы рассмотрим свойство animation и научимся создавать ключевые кадры, выходящие за рамки простых переходов.
И, наконец, соберём все воедино — это несколько продвинутых примеров, использующих оба свойства. Рассмотрим, как сделать нашу работу доступной и поделимся полезными ресурсами CSS, которые можно применять в проектах, а также инструментами JavaScript, которые можно использовать для создания более сложных эффектов.
Помощь и поддержка
Я буду рад услышать от вас вопросы и пожелания. Не стесняйтесь писать мне по электронной почте donovan@cssanimation.rocks или в Твиттере @donovanh в любое время.
Нужно подтянуть знания CSS?
Если вы новичок в CSS, возможно, стоит потратить время на знакомство с основными понятиями. Не обязательно быть экспертом в CSS. Если вы знаете, что такое стилевое свойство, то всё будет в порядке.
Некоторые онлайн-инструменты и ресурсы, которые могут оказаться полезными:
Домашнее задание
Вы заметите, что каждая глава заканчивается небольшим разделом с домашним заданием. Зависит от вас, выполнять его или нет, но если хотите, то можете использовать его для помощи в обучении. В каждом домашнем задании будет предложено что-то попробовать или над чем-то подумать. Выделите немного своего времени и увидите, что ваше понимание CSS-анимации станет гораздо лучше.
Готовы? Тогда приступим к изучению CSS-анимации!