Оживляем сайт с помощью CSS анимации

Оживляем сайт с помощью CSS анимации

От автора: анимация быстро становится важным инструментом в дизайне и все чаще используется для того, чтобы помочь пользователю понять что-либо, а также для взаимодействия с нашей работой. За последние годы анимация стала намного лучше работать в браузерах и на мобильных устройствах. По факту все современные десктопные браузеры идут со встроенной поддержкой CSS анимации. CSS дает нам и другие замечательные инструменты, еще никогда не было более подходящего времени, чтобы придать нашему дизайну движения. Но почему анимация так важна? И с чего начать?

Почему CSS анимация важна в наших дизайнах?

Движение – большая составляющая того, как мы взаимодействуем с миром и понимаем его. Это врожденный инстинкт.

Эволюция постаралась, чтобы мы хорошо распознавали движение. Движение защищает нас и помогает замечать изменения в окружении. Оно добавляет дополнительный уровень коммуникации помимо слов. Наблюдение за движением и визуальные подсказки позволяют нам невербально понимать сложные действия и идеи.

Анимацию в вебе можно использовать для достижения того же эффекта, а также чтобы добавить глубины и значения диалогу между нашими пользователями и интерфейсом.

Например, можно анимировать элементы так, чтобы они уходили за экран при удалении, а при добавлении выезжали обратно. Такое простое движение помогает нам понять, откуда берутся эти элементы. Такая анимация дополняет нашу умственную модель, с которой мы работаем, и делает взаимодействие богаче и более значимым.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

С помощью анимации можно привлекать внимание к определенным элементам интерфейса, а также рассказывать истории и вести пользователей шаг за шагом.

Анимация и плавные переходы вместе с микровзаимодействием на сайте или в приложении помогают привлечь пользователей, удивить их и обрадовать. Это также мощный способ дать пользователю отклик на его действия: наведение мыши, клики по кнопкам и заполнение форм. Все это дополняет диалог и помогает персонализировать интерфейс.

А что с JavaScript?

CSS – не единственный способ добавить анимацию в дизайн, но самый простой. С появлением jQuery нам открылась возможность анимировать и двигать элементы на странице с помощью JS.

А совсем недавно мощные пакеты типа GreenSock GSAP добавили в браузеры продвинутую анимацию, даже в браузеры без поддержки CSS анимации. Они обеспечили детальный контроль над анимацией, хорошую обратную совместимость и множество полезных функций.

Но у всего есть своя цена. Дополнительные JS зависимости делают наш проект тяжелее, что выливается в долгую загрузку и обработку страниц. На быстрых соединениях это не так заметно, но большая часть мира использует медленные соединения и мобильные устройства. Поэтому нужно помнить о производительности.

Дополнительную сложность несут JS фреймворки, они усложняют обслуживание кода и являются потенциальными источниками ошибок.

И все же, JS анимация проделала долгий путь, это мощный и полезный инструмент для создания продвинутой и сложной анимации.

С CSS можно сделать много чего, не прибегая к плагинам: это самый быстрый и простой способ начать создавать анимацию.

Анимация на CSS

Браузеры поддерживают CSS по умолчанию (в разной степени).

Так же, как мы использовали свойства font-size, background в стилях для создания визуального дизайна, можно использовать свойства transition, animation и keyframes для создания движения.

Свойство transition можно использовать для сглаживания изменений в стилях при наведении курсора. С помощью keyframes можно задавать циклы из нескольких состояний, а также создавать сложные эффекты. С помощью встроенных CSS свойств можно контролировать длительность анимации и направление. После недолгого изучения все будет казаться таким знакомым даже тем, у кого скудные знания в CSS.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Знание возможностей CSS помогает при выборе между keyframes и JS.

Почему не начать прямо сейчас?

Чем хороша CSS анимация – вас ничего не останавливает, вы можете начать прямо сейчас. Вам нужен лишь браузер и текстовый редактор, или же можно воспользоваться сервисом типа CodePen.

Восторгаться анимацией в браузерах можно по множеству причин. Есть множество замечательных примеров, когда анимация улучшала не только внешний вид сайта, но и взаимодействие, а также избавляла от путаницы. Однако анимация не только практичный инструмент, работать с ней весело, она оживляет интернет.

Недавно я вместе с SitePoint создал новый курс по анимации с помощью CSS. Я очень волнуюсь по этому поводу. Мне кажется, жизненно важно научить людей, как делать что-то новое в интернете, чтобы сеть становилась все лучше. Это расширение моей работы на CSSAnimation.rocks, еще один замечательный ресурс для изучения CSS анимации.

Что вы узнаете из курса:

Анимация в браузере. Установка сцены для курса, изучение преимуществ и принципов анимации.

Переходы – от А к Б. Научитесь добавлять плавные переходы в стили для двух состояний.

Keyframe анимация. Научитесь создавать более сложные движения с помощью @keyframes и свойства animation. Сперва теория, потом практические примеры.

Функции анимации и тайминга. Узнаете, как добавить характер и контролировать тайминг анимации с помощью функций анимации и кубических функций Безье.

Собираем все вместе. Переходим на следующий уровень. Комбинируем эффекты и создаем несколько переходов и анимаций.

Вопросы по браузерам. Обсудим поддержку в браузерах, вендорные префиксы и производительность. Убедимся, что ваша анимация будет работать на максимальном количестве устройств.

Доступность и анимация. Решим проблемы с доступностью, а также убедимся, чтобы наша анимация не отвлекала и не укачивала.

Помимо теории и практических примеров из курса вдохновение можно почерпнуть во множестве мест. Я люблю смотреть концепты анимации на Dribbble. На сайте Use Your Interface можно найти множество вдохновляющих материалов по интерфейсам. Для iOS есть сайт Capptivate. Нужно что-то для кинематографа, добавьте в закладки Art of the Title.

Анимация может много чего дать дизайну. Она помогает общаться, рассказывать истории, она может быть забавной и творческой. Научиться создавать анимацию легко, а дальше все зависит только от вашей фантазии. Так почему бы не начать. Попробуйте что-то новое и убедитесь, как движение оживит ваш дизайн!

Автор: Donovan Hutchinson, Guy Routledge

Источник: https://www.sitepoint.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее
Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Курс по Gulp. Основы

Прямо сейчас посмотрите курс по Gulp!

Смотреть курс

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree