28.10.2015

CSS анимация при наведении или клике

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

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

  1. :hover — анимация при наведении на элемент
  2. :active — анимация при зажатом курсоре над элементом
  3. :focus — анимация после клика на элемент (до следующего клика на другой элемент)

Для получения классической анимации при наведении курсора нужно указать после класса или тега :hover, например для стиля .test: .test:hover {/*—Ваша анимация—*/}
Пример:

See the Pen bVMWzw by Alexander (@piocan) on CodePen.

Для плавности анимации задается свойство transition, в примере был использован transition: all 0.3s ease;, где all это свойства на которые работает анимация (all — то есть все свойства), а 0.3s это время анимации, свойство ease определяет динамику анимации.

2. Селектор :active активируется когда на элементе зажат курсор:

See the Pen EVLmzd by Alexander (@piocan) on CodePen.

3. Селектор :focus активен после клика курсора, но пока не было клика на другой элемент.

Как все эти селекторы работают вместе можно посмотреть в хорошем примере кнопки: Пример анимированой кнопки в стиле Google