Простые CSS анимации, которые оживят ваш сайт

Иногда даже одно лёгкое движение может сделать сайт запоминающимся. Не нужно быть мастером фронтенда, чтобы добавить немного магии в интерфейс — иногда достаточно пары строк CSS. Простые анимации делают сайт динамичным, визуально приятным и интуитивно понятным: кнопки становятся отзывчивыми, элементы появляются с грацией, а страницы начинают «дышать».

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

Основы CSS-анимации

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

Псевдокласс :hover

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

Свойство transition

transition позволяет анимировать изменение одного или нескольких CSS-свойств. Вместо того, чтобы стиль менялся мгновенно, вы можете задать плавный переход — указав, что именно должно меняться, за какое время и с какой функцией.

Вместе с :hover это даёт простой способ оживить интерфейс — всё, что вам нужно, это начальное и конечное состояние, и CSS сам сделает остальное.

Свойство animation и @keyframes

Если вам нужно более сложное поведение — например, чтобы элемент «подпрыгивал», пульсировал или вращался — на помощь приходит @keyframes и свойство animation. С их помощью можно описать последовательность кадров анимации и применить её к элементу.

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

CSS анимации

Теперь, когда мы прошли небольшой вводный курс по анимации, займемся наконец-то делом. Для удобства я разбил анимации на группы.

Наведение и клики

Анимации при загрузке/появлении

Декоративные и attention-grabbing

Эффекты для текста

Написать комментарий

Мало букафф? Читайте есчо !

Позиционирование фона с помощью background-position

Май 3, 2018 г.

В CSS, для позиционирования фонового изображения в контейнере, мы используем свойство background-position. Свойство можно задать отдельно для оси X и Y,  кроме того можно задать 2, 3 или 4 параметра. Классический случай - позиционирование с ...

Читать

Как делаются сайты с адаптивным дизайном?

Апрель 7, 2016 г.

Последний писк браузерной моды - адаптивный дизайн - вызван широким внедрением в быт мощных смартфонов. По количеству ядер процессора, быстродействию и ...

Читать

 

Комментарии к «Простые CSS анимации, которые оживят ваш сайт»

Понравилась статья? Есть вопросы? - пишите в комментариях.



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