что такое веб анимация
Анимация — это изменения в движении. Она позволяет точнее отобразить окружающую нас жизнь. Вот почему люди часто говорят, что анимация для сайта оживляет его. Данная фраза довольно точно передает цель анимации в веб-дизайне.
Подобная иллюзия движения при правильном применении является свидетельством того, что пользователи сделали что-то. Что они успешно взаимодействовали с интерфейсом и вызвали какие-то изменения.
Анимация в Сети: Краткая история
Давайте взглянем на то, как анимация в интернете достигла своего нынешнего уровня. В значительной степени все началось благодаря гифкам…
Когда возможности файлов в формате gif были исчерпаны, людям потребовались новые способы добавления анимации на сайты. И звука!
Анимация больше не является диковинкой для веб-дизайнеров. В кино она стала основой для нового способа рассказа. Для нас она становится платформой для эффективного проектирования взаимодействий:
Чем больше анимация основывается на открытых стандартах, тем больше людей могут видеть ее. И то, что при применении анимации для взаимодействий акцент все более смещается в эту сторону, это очень хорошо.
Типы веб-анимации
Недостаточно просто добавить анимацию для элементов веб-страницы и надеяться, что это автоматически повысит ее конверсию:
Необходимо тщательно взвесить аспект фактической реализации. Если анимация будет настолько тяжелой, что от нее будут виснуть мобильные устройства пользователей, у вас появится проблема. И не одна.
Начнем с того, что рассмотрим различные виды анимации, используемые в Сети.
Анимации элементов интерфейса
Это очень важно с учетом того, что плоский дизайн становится все более популярным в Сети. Люди должны видеть разницу между элементами интерфейса и просто графикой. Задавая для элементов управления простую анимацию при взаимодействии, мы даем пользователям четко понять эту разницу.
Это может быть изменение цвета кнопки или ее смещение при наведении курсора. Данная категория также включает в себя анимацию, которая задает « всплывание » сайдбаров на странице или появление модальных окон:
Анимация ожидания
Ее полезность была доказана давно, когда были изобретены графические пользовательские интерфейсы. Она начиналась с того, что курсор мыши превращался в песочные часы, а также с прогресс-баров. Apple в свое время ввела « вращающийся пляжный мяч смерти «, а у Windows была анимация файлов, перелетающих из одной папки в другую при копировании:
Эти подходы были реализованы в интернете, как только это стало возможно, и не без оснований. Когда люди не понимают, что происходит, они продолжают нажимать кнопку или вводить текст. Но если бы они могли увидеть, что процесс запущен, этого бы не произошло.
Анимация повествования
На сегодняшний день повествование историй с помощью анимации вышло за рамки мультипликации. Речь вообще не идет о мультфильмах. Скорее о сайтах, которые построены таким образом, что, когда пользователь взаимодействует с ними ( например, с помощью прокрутки страницы вниз ), запускается анимация, которая рассказывает историю.
В качестве примера данной анимации на сайте HTML можно привести страницы, которые демонстрируют новый продукт, « собирая » его на экране перед вашими глазами. Другие больше похожи на мультфильмы, в которых маленькие символы указывают на то, что нужно сделать, чтобы увидеть следующий кадр:
Эффективность такой анимации довольно спорна. Как правило, она не предназначена для улучшения юзабилити, а только чтобы произвести впечатление на пользователя и дать ему некоторое представление о теме страницы. Она используется, чтобы показать преимущества товара или рассказать об истории создания компании.
Компания Sony продемонстрировала несколько различных устройств, части которых компонуются друг с другом в разных комбинациях.
Декоративная анимация
Декоративная анимация для сайта должна быть полностью скрыта. Покажите ее после того, как люди последуют призыву к действию. Также можно включить небольшую анимацию, которая запускается только один раз, когда пользователь делает что-то конкретное. Например, наводит курсор мыши на что-то маленькое в шапке / подвале сайта.
Прокрутите любую страницу до конца вниз, и появится симпатичный динозавр, который « сфотографирует вас «. Более того, на страницах, содержащих эту анимацию, так же парит из стороны в сторону воздушный шарик.
Анимация в рекламе
Реклама. Для некоторых, это их деньги, а для других это раздражение. Добавьте в рекламный блок анимацию, и бум! Глаза тянутся к нему против вашей воли. Это рефлекторное действие.
Добавьте звук, и вы почувствуете приступ ненависти к этой рекламе… это тоже рефлекторное действие.
Это почти неизбежно. Если нужно заставить людей смотреть на рекламные блоки, анимация — это отличный способ. Если бы анимированная реклама не работала, мы бы ее не использовали.
Но с подобной gif анимацией для сайта связана та же проблема, что и с декоративной: она отвлекает пользователя от его цели. В мире онлайн-продаж отвлечение внимания может быть подобно смерти.
Реализация анимации
Производительность, производительность, производительность
Проблема заключается в том, что до сих пор в сети встречаются сайты, использующие новейшие технологии, но анимация на них все равно дергается.
Начните с малого
Если рассматривать анимацию с точки зрения инструмента проектирования, то лучше начать с малого. С одной стороны, небольшая и ненавязчивая анимация работает лучше. С другой стороны, чтобы быть полезной, масштабная и кричащая анимация должна иметь более вескую цель, чем просто « хорошо выглядеть «.
Большинство сайтов вообще не нуждается в какой-либо анимации кроме той, которая применяется, чтобы сделать использование элементов интерфейса « реальным » и естественным. Перед тем, как начать « разбрасывать » на своем сайте параллакс, как конфетти, спросите себя, улучшит ли это опыт взаимодействия пользователей.
В большинстве случаев ответ будет « нет «. Конечно, есть и исключения. Но в подавляющем большинстве лучше просто анимировать кнопки, создать скрытую, всплывающую панель навигации, а « адскую » анимацию вызывать уже после того, как пользователь заполнит и отправит контактную форму.
Продолжительность анимации должна быть небольшой
Анимация для сайта должна быть быстрой, или, вернее, она должна проигрываться быстро. Я говорю не о производительности, а о фактическом времени, в течение которого объект находится в движении.
Представьте себе, как мы взаимодействуем с реальными объектами. Иногда мы двигаем их быстрее, иногда медленнее. Скорость, с которой мы взаимодействуем с объектом, может зависеть от его размера, цели, с которой мы с ним взаимодействуем. Но чаще всего мы берем вещи и передвигаем их довольно быстро.
« Миллисекунды » — это, как правило, то количество времени, которое должна занимать анимация интерфейса. Немного дольше, и люди начинают терять терпение, сердиться на свой компьютер или на ваш товар. Необходимо использовать небольшую продолжительность анимации, иначе она будет казаться медленной.
Это особенно актуально для элементов, которые люди должны использовать по несколько раз. Любая анимация на сайте HTML теряет свою привлекательность, когда вынужден смотреть ее в десятый раз.
Заставьте элементы «подпрыгивать»
Физические объекты отскакивают. Некоторые из них отскакивают не так пружинисто. Но в основном все объекты немного отскакивают, если уронить их с большой высоты на твердую поверхность.
Взаимодействие с элементами пользовательского интерфейса похоже на взаимодействие с небольшими твердыми предметами. Вы перетягиваете их в одну сторону, и они немного отскакивают обратно. Вы помещаете их куда-то, а они еще немного попрыгают.
Это может принести пользу, если вы создадите небольшую анимацию « отскока «, особенно, если элементы будут « подпрыгивать » вертикально. Все это делается для поддержания иллюзии естественного поведения.
Предметы обычно не останавливаются мгновенно
После остановки предметов обычно проходит некоторое время, прежде чем они полностью перестают двигаться. Если находящиеся в покое объекты начинают движение, чтобы набрать полную скорость, у них также уходит некоторое время, они приходят в движение с ускорением.
Пожалуйста, оставьте свои отзывы по текущей теме материала. За комментарии, подписки, дизлайки, отклики, лайки низкий вам поклон!
Пожалуйста, оставьте ваши мнения по текущей теме материала. За комментарии, лайки, подписки, дизлайки, отклики огромное вам спасибо!
Веб-анимация: где, зачем и почему
Качественная и уместная анимация веб-страниц радует глаз и помогает в работе. Это – одна из основ веб-дизайна наших дней. Взаимодействие пользователей с современными веб-сайтами серьёзно завязано именно на анимации. Она способна сообщать о неких состояниях страницы, направлять внимание. Анимация помогает пользователю увидеть результат его действий и может влиять на его поведение.
Анимация и последовательности событий
Анимация при загрузке данных
Отвлечь пользователя во время загрузки контента – вот одна из самых распространённых ситуаций использования анимации. Дело в том, что анимация в подобные моменты воздействует на то, как люди воспринимают время. Она создаёт ощущение того, что действие выполняется быстрее, чем на самом деле.
Если время выполнения действия уменьшить не удаётся, всегда следует стремиться к тому, чтобы пользователю было не скучно ждать.
Чем проще анимация загрузки – тем лучше. При этом следует очень осторожно относиться к любым дополнительным эффектам, вроде звуков. Обычно они попросту не нужны. Хорошая анимация загрузки занимает внимание посетителя сайта. При этом, если пользователю нравится то, что он видит, если при просмотре анимации у него появляется некоторая заинтересованность, он меньше обращает внимание на длительность загрузки.
Примечание: тут везде анимированные GIF-файлы, вставил в виде ссылок и выделил.
Даже когда время загрузки невелико, забавная анимация способна добавить ожиданию развлекательный момент. (Автор: Thomas Bogner)
Анимация процессов и пошаговых операций
Анимация может показать выполнение некоей линейной последовательности действий, не зависящей от пользователя. Классическая полоса загрузки – самый распространённый пример.
Полоса загрузки для Aviasales. (Автор: Mark)
Анимацию можно использовать и для процессов, предусматривающих выполнение пользователем пошаговых операций.
Анимация может показать прохождение по шагам некоей последовательности действий. (Автор: Joshua Sortino)
Анимация и каркасное отображение веб-страниц
Вариант каркасного отображение веб-страниц предусматривает наличие пространства, которое постепенно заполняется загружаемой информацией. Постепенное, не разорванное периодами «пустоты», наполнение страницы, даёт ощущение быстроты выполнения действий. Эту технику можно использовать на практически любом сайте вместе с ненавязчивой анимацией процесса загрузки, которая обеспечивает удержание внимания пользователя.
Каркасные экраны загружают элементы пользовательского интерфейса ещё до того, как будет полностью отображено содержимое страницы. (Автор: tqndemseven)
Визуальная обратная связь
Анимированная реакция на действия пользователя
Анимация элементов управления для настольных и мобильных сайтов
Один из самых распространённых примеров визуальной обратной связи – анимация при наведении курсора на интерактивный элемент.
Когда пользователь не уверен в назначении элемента управления, он пытается навести на него курсор мыши. Анимация элемента при наведении курсора, на интуитивном уровне, сообщит пользователю о том, что с объектом можно взаимодействовать. (Источник: codepen)
Вышесказанное справедливо для сайтов, которые просматривают на обычных компьютерах, а вот мобильные устройства, на экранах которых нет курсоров мыши, это уже другая история. Поэтому, на мобильных сайтах, кнопки и другие интерактивные элементы должны быть оснащены визуальными подсказками. Подсказки должны указывать, ещё до того, как пользователь коснётся элемента, на то, что с ним можно взаимодействовать. А после касания нужно немедленно дать визуальную обратную связь. Это указывает пользователю на то, что его действие вызвало реакцию системы, наподобие кнопки на рисунке ниже, которая выглядит нажатой при касании.
Затенение указывает на то, что элемента можно коснуться для выполнения некоего действия. (Автор: Vadim Gromov)
Привлечение внимания с помощью анимации
Хорошо известно, что наши глаза привлекает движение. Этим можно воспользоваться для того, чтобы направлять внимание пользователя и подкреплять выполняемые им действия.
Вот, например, ввод данных в форму. Анимация отлично подойдёт для придания этому процессу новых качеств. На рисунке, приведённом ниже, форма отрицательно «качает головой» в ответ на попытку выполнения действия при незаполненных полях. Если всё введено верно, она вполне может одобрительно «кивнуть». Такая анимация позволяет пользователю мгновенно понять то, к каким результатам привело его действие.
Форма отрицательно «качает головой». (Автор: Michaël Villar)
Навигация
Переходы и взаимоотношения состояний
Сегодня в тренде скрытые навигационные меню, которые появляются при щелчке на кнопке-гамбургере. С помощью анимации можно обеспечить связь состояний приложения и предотвратить слишком быстрые, режущие глаз, переходы между экранами. Хорошо спроектированные переходы дают пользователям чёткое понимание того, на чём следует сосредоточиться.
Анимацию можно использовать для того, чтобы сделать переходы между экранами приложения более очевидными. В итоге пользователь будет точно знать, где он был в начале действия, и где оказался после его завершения. (Источник: codyhouse)
Вот – пример с веб-сайта Brian Hoff Design. Когда пользователь щёлкает по круглой кнопке со стрелкой, большой блок меню появляется с правой стороны экрана. Благодаря анимации, меню будто выезжает из области, находящейся за пределами экрана. В результате во взаимодействии со страницей нет логических разрывов.
Анимация помогает связать воедино два состояния страницы
Плавное изменение состояний
Анимация переходов бесценна для указания смены состояний страницы. В статье «Умные переходы в UX-дизайне» Адриан Зумбруннен показал отличный пример того, как анимация может помочь пользователю оставаться в курсе того, где именно он находится, при щелчке по ссылке, которая ведёт к другому разделу той же самой страницы.
Просто сравните это с резким переходом, который ощущается как неестественный «скачок».
Внезапное изменение состояния выглядит ненатурально. Пользователю тяжело воспринимать подобное. (источник: smashingmagazine)
А вот то же самое, но с анимацией:
Анимировать – значит «вдохнуть жизнь» (источник: smashingmagazine)
В механизме навигации по сайту использована ненавязчивая анимация. Это помогает пользователю ориентироваться в статье, видеть, где именно расположен раздел, который он просматривает.
Творческие эффекты
Творческий подход к анимации украшает интерфейс, привносит в него развлекательную ценность. Сайты с подобными интерфейсами способны восхитить посетителя и запомниться ему.
Искусство рассказывать истории и длинный скролл
«Всё внимание – на верхнюю половину видимой части сайта». Совсем недавно это было железным правилом. Дизайнеры стремились, во что бы то ни стало, заполнить эту область ценной информацией. Теперь же «правило верхней половины» потеряло абсолютную истинность. На самом деле, известно, что «на обычной странице 66% внимания сосредоточено ниже верхней половины видимой части сайта». Таким образом, при скроллинге страницы то, что появляется снизу, привлекает больше внимания. Это делает прокрутку неотъемлемой частью дизайна взаимодействия.
Анимации оживляют процесс скроллинга и доставляют удовольствие пользователю.
Анимация способна раскрыть свой потенциал в деле рассказывания историй. Это позволяет создать у пользователя эмоциональную связь с интерфейсом, который иначе был бы скучным и невыразительным. Тут весьма распространена анимация с эффектом параллакса, но, полагаем, в подобных ситуациях имеет смысл поискать что-то, менее бросающееся в глаза. Рассмотрите возможность разбиения сайта на «фрагменты», рассчитанные на прокрутку. В пределах каждого из этих фрагментов вы можете анимировать вывод текстов и изображений.
Например, ниже показаны анимации, оживляющие страницу, применённые к обычным изображениям.
Анимация при прокрутке. Источник: Le Mugs
Инструменты и учебные руководства
Выводы
Дизайн – это больше чем визуальное представление данных. Дизайн – это управление взаимодействием пользователя и веб-страницы. Как результат, анимация играет чрезвычайно важную роль в деле передачи информации. Поэтому, проектируя страницы, необходимо с самого начала помнить об интерактивной природе веб-пространства и воспринимать её проявления как естественную часть дизайна.
Уважаемые дизайнеры! Расскажите нам о своих любимых приёмах веб-анимации.
Принципы анимации для веба
Примечание переводчика: Представленный ниже материал содержит значительное количество технических терминов, при переводе которых могут возникнуть неточности. Если вы заметили опечатку, ошибку или неточность перевода — напишите нам, и мы оперативно всё исправим.
Кроме того, в продолжение темы сегодняшней публикации на одну неделю будет открыт продвинутый курс академии по CSS-анимациям, который обычно доступен по подписке. Его описание размещено в конце топика.
Фронтенд-дизайнеры и разработчики используют CSS для создания стилей, позиционирования элементов — в общем, для того, чтобы сайты выглядели красиво. Часто CSS применяют и для добавления движений на веб-страницы, хотя дело обычно не идёт дальше плавных переходов или анимации.
На самом деле анимация может быть мощным инструментом, который позволяет посетителям сайта и клиентам легче взаимодействовать с интерфейсом продукта и быстрее добиваться своих целей. Этого можно достичь, если следовать в своей работе некоторым основополагающим принципам.
Компания Disney занимается анимацией уже много лет и выработала такие рекомендации — ещё в 1981 была опубликована книга «Иллюзия жизни: Анимация Disney» («The Illusion of Life: Disney Animation»), в которой перечислялись 12 принципов анимации (про них писали на Хабре). Они описывают то, как использовать анимацию для создания у зрителей, смотрящих на экран, ощущения реального мира.
В сегодняшней статьей мы рассмотрим каждый из двенадцати этих принципов и обсудим их возможное применение при создании веб-страниц. Все исходники CSS и HTML можно скачать на Codepen.
Сплющивание и растяжение
В мире существует понятие «массы тела» — и когда объект движется, его масса остаётся неизменной. Когда мяч ударится о землю, он станет немного шире и сплющится, потому что во время физического контакта масса объекта перераспределяется.
Этот эффект наиболее полезен при создании физических объектов (например, люди, часы или подпрыгивающие мячи).
Конечно, в случае веб-страниц это свойство можно и проигнорировать — DOM-элементы не обязательно ассоциируются с физическими объектами и могут как угодно расти и уменьшаться в размерах на экране. К примеру, кнопка может увеличиться и трансформироваться в информационное окно, а сообщения об ошибках появляются и исчезают.
Несмотря на это, технику «сплющивания и расширения» можно использовать для создания ощущения наличия у элемента на странице физической массы. Даже небольшие изменения могут создать тонкий, но привлекающий взгляд эффект.
Ожидание
Движения не происходят внезапно. В обычной жизни любому действию предшествует некая подготовка, будь то замедляющийся перед падением со ступенек мяч или человек, сгибающий колени перед прыжком.
Этот эффект можно использовать для того, чтобы сделать движения объектов на веб-странице более реалистичными. Само ожидание может быть реализовано, к примеру, в качестве лёгкого покачивания, которое позволяет пользователям понять, что происходит и помогает им легче следить за перемещениями объекта по экрану.
Фокусировка
Этот эффект заключается в определении объекта в качестве фокуса сцены, в то время как остальные объекты освобождают место для главного действия. Для создания такого эффекта нужный объект соответствующим образом выдвигают на передний план или маскируют сопутствующие элементы, чтобы сфокусировать взгляд пользователя на том, что он должен увидеть.
В терминах веба это означает использование полупрозрачного затемнения для определённого контента. Наложение более тёмного слоя на существующую страницу и последующее размещение контента на переднем плане фокусирует на нём всё внимание пользователей.
Другой подход заключается в использовании движений. Когда на странице одновременно движутся несколько объектов, довольно трудно понять, на какой из них действительно стоит смотреть. Если в такой ситуации остановить все объекты, кроме одного «нужного», то все внимание автоматически будет приковано к нему.
Движение можно использовать и по-другому. Например, если пользователь работает с каким-нибудь документом, то небольшое подрагивание и мигание кнопки «Сохранить» может побудить человека нажать на неё. Когда на экране нет никакой активности, даже небольшое движение очень выделяется.
Движения «полный вперёд» и «пошаговое изменение»
Прямое движение характеризуется полной отрисовкой всех кадров анимации. В свою очередь, пошаговое изменение характеризуется созданием последовательности ключевых кадров, интервалы между которыми заполняются позднее, обычно с помощью вспомогательных средств.
Второй подход используется в большинстве веб-анимации: переходы между главными кадрами реализуются браузером, который интерполирует разницу между каждым из них и дорисовывает столько промежуточных кадров, сколько потребуется для того, чтобы сделать итоговую анимацию плавной.
Исключением является функция «Steps». При её использовании браузер «шагает» по заданному числу дискретных кадров. Таким способом можно создать последовательность изображений, а затем проиграть их в браузере по одному с помощью стиля «Straight Ahead Action».
Следование и захлёстывание
Не всегда действия происходят одновременно. Когда движущийся автомобиль резко тормозит, то с дымом покрышек «клюёт носом», а водитель внутри продолжает двигаться, пока не произойдёт окончательная остановка.
Этот эффект достигается с помощью движений следования и захлёстывания — они нужны, чтобы просигнализировать о том, что объект остановился. К примеру, элемент, помещенный в список может немного проехать нужное положение, а затем вернуться на правильную позицию.
Эффект захлёстывания создаётся с помощью придания объектам различного темпа движения. Этот подход используется при переходах в iOS — некоторые кнопки и элементы двигаются с разной скоростью, в результате перемещения становятся более реалистичными, чем они были бы в случае движения с одинаковой скоростью. Комбинирование движений даёт пользователю время на то, чтобы осознать происходящие изменения.
В вебе это обычно достигается комбинированием плавных переходов или CSS-анимацией с разной скоростью проигрывания.
Плавное ускорение и замедление
Объекты редко переходят мгновенно от состояния покоя сразу к максимальной скорости. Обычно на то, чтобы разогнаться им требуется какое-то время — так же, как и для того, чтобы остановиться. Без постепенного ускорения и замедления движения выглядят неестественно.
В терминологии CSS ускорение и замедление известно как easing или «функция плавности», которая описывает изменение скорости анимации.
Используя функции плавности можно создавать ускоряющиеся и замедляющиеся анимации и даже более сложные эффекты (с помощью функции cubic-bezier ).
Замедление и ускорение делает объекты более реалистичными, но есть и ещё один момент: в жизни они редко двигаются по прямой, как правило движение идёт по изогнутой дуге.
Добиться такого движения по дуге с помощью CSS можно парой разных способов. Один заключается в совмещении нескольких анимаций. К примеру, анимация подпрыгивающего мяча может быть сделана с помощью движений объекта вверх и вниз, и второе движение совмещено с передвижением ещё и вправо. Таким образом получится, что мячик скачет по экрану.
Второй способ — поворот элемента. С помощью изменения центра вращения и выноса его за пределы изначального объекта также можно сформировать дугу.
Второстепенное действие
Основное действие, происходящее на экране, можно подчеркнуть «второстепенной» анимацией. Это может быть движение рук человека при ходьбе или подрагивание его головы при каждом шаге. Или поднимающаяся с земли пыль при каждом ударе мяча.
В случае веб-сайтов вторичные элементы могут «разъезжаться», чтобы выделить то, на что пользователю действительно нужно обратить внимание (пример использования — перетягивание элемента для вставки в середину списка).
Время выполнения
С помощью манипуляции с длительностью анимации можно сделать так, чтобы крупные объекты казались тяжёлыми, а небольшие — лёгкими.
С помощью изменения длительности анимации можно выделить её среди контента веб-страницы или во время взаимодействия с пользователем.
Преувеличение
Этот приём часто используется для привлечения внимания к определённым действиям и придании им большей драматичности в мультфильмах. Волк, который пытается кого-то укусить открывает рот гораздо шире, чем обычно — так гораздо страшнее и внушительнее.
На веб-странице объекты можно увеличивать и уменьшать, чтобы выделить их и привлечь внимание пользователя. Например, при заполнении формы активное поле имеет смысл сделать больше, а неактивные в данный момент, наоборот, уменьшить.
Объём
При работе с объёмными объектами необходимо учитывать правила перспективы — люди живут в трёхмерном мире, поэтому если что-то выглядит не так, как они ожидают, это кажется неправильным.
В современных браузерах есть хорошая поддержка трёхмерных трансформаций. Это значит, что разработчик может создать анимацию, которая будет поворачивать объекты и перемещать их по экрану, а уже сам браузер создаст плавные переходы между состояниями.
Привлекательность
В мире искусства внимание к деталям может создавать особую атмосферу — возникающую, например, при взгляде на картину. Точно также и в мире веба качественные и хорошо подобранные анимации позволяют сайту выглядеть более привлекательно и авторитетно. Больших успехов в подобной работе добилась, к примеру, команда сервиса Stripe.
Заключение
Использование принципов, описанных выше позволит веб-разработчикам создавать более качественные и приятно выглядящие анимации. Если анимация учитывает физический вес объекта, выделяет изменения, в ней используются вторичные движения, а ее время исполнения скрупулёзно рассчитано — то это значительно улучшит общее впечатление пользователей от страницы.
А теперь про курс по анимации
Как мы уже сказали в начале статьи, в продолжении темы публикации мы окрываем для бесплатного доступа один из продвинутых курсов HTML Academy, который посвящён анимации.
В курсе «Анимация» рассматриваются основы анимации на CSS. Вы будете двигать, поворачивать и видоизменять объекты, попутно осваивая приёмы работы анимации в CSS.
Все задания разработаны в рамках одной сюжетной линии (легенды), согласно которой вы можете помочь человечеству пройти путь развития цивилизации вплоть до полётов в космос.