Анимации CSS

В этом туториале вы сначала заставите кнопку менять цвет по наведению мыши, а затем привяжите анимацию к внешнему тегу:

1. Как оживить кнопку

Очень советуем не просто читать туториал, а выполнять его вместе с нами, шаг за шагом. Так материал быстрее усвоится и повторить его будет проще.

1.1. Запустите стартовый шаблон

Для начала возьмите наш стартовый шаблон с кнопкой красного цвета, сохраните к себе в файл и откройте в браузере:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style type="text/css">
      .animated-btn {
        background-color: red;
      }
    </style>
  </head>
  <body>
    <button class="animated-btn">Кнопка</button>
  </body>
</html>

В браузере должна получиться такая кнопка. Как видите, на наведение мыши она не реагирует:

1.2. Добавьте класс с новым стилем

Для начала попробуйте поменять цвет кнопки в принципе, без наведения. Сложность здесь в том, что старое CSS-правило надо сохранить: красный цвет должен вернуться кнопке, когда вы уберёте от неё курсор мыши.

Сейчас создайте второе CSS-правило для той же кнопки. Поместите новое правило ниже первого.

.animated-btn {
  background-color: red;
}
.animated-btn {
  background-color: blue;
}

Откройте Инструменты разработчика браузера, и вы увидите, что оба правила сработали. Оба правила меняют стиль background-color и поэтому второе перекрыло первое:

Кнопка стала синего цвета. Теперь научите её реагировать на движение мыши.

1.3. Добавьте :hover

Теперь дело за малым: добавьте новому селектору ключевое слово :hover. Да, вот так просто:

.animated-btn {
  background-color: red;
}
.animated-btn:hover {
  background-color: blue;
}

Теперь кнопка меняет цвет при наведении:

Ключевое слово :hover называют псевдоклассом. Подобно классу его можно использовать в селекторе. Но, в отличии от класса, он динамичен — браузер словно добавляет hover тому тегу, на который сейчас указывает стрелка мыши и забирает при потере наведения.

Правило .animated-btn:hover говорит браузеру: Ищу тег с классом animated-btn, и чтобы на него смотрел указатель мыши. Когда мышь наведена на кнопку, то правило срабатывает. Как только мышь перемещается на другой тег — перестаёт.

Псевдокласс :hover появляется и исчезает при движении мыши

Есть ещё одна особенность у :hover. Псевдокласс получает не только один тег, но все его родители. В примере с кнопкой это будут сразу два тега <button> и <body>:

...
<body>
    <button class="animated-btn">Кнопка</button>
...

1.4. Добавьте больше стилей

Очевидно, что вместо смены цвета вы могли поменять кнопку как угодно. Например, добавить ей тень:

2. Как расширить область hover

Менять кнопку при наведении вы научились. А что, если вы хотите менять кнопку по наведению мыши на тег рядом с ней?

2.1. Запустите стартовый шаблон

Используйте наш стартовый шаблон, это красная кнопка внутри зелёного квадрата:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style type="text/css">
      .animated-btn {
          background-color: red;
      }
      .btn-wrapper {
          height: 100px;
          width: 100px;
          background-color: green;
          display: flex;
          align-items: center;
          justify-content: center;
      }
    </style>
  </head>
  <body>
    <div class="btn-wrapper">
      <button class="animated-btn">Кнопка</button>
    </div>
  </body>
</html>

Выглядит это примерно так:

2.2. Добавьте класс с новым стилем

Давайте сделаем кнопку синей. Но, на этот раз, при написании селектора сперва, выберите зелёный контейнер, а уже потом кнопку внутри него. Добавьте такое правило:

.btn-wrapper .animated-btn {
    background-color: blue;
}

Результат:

2.3. Добавьте :hover

На этот раз :hover должен достаться селектору для зелёного прямоугольника:

.btn-wrapper:hover .animated-btn {
    background-color: blue;
}

Понять как работает селектор можно, прочитав его задом наперёд: Найди элемент с классом animated-btn, да такой, чтобы среди родителей у него был элемент с классом btn-wrapper и мышь была наведена на этого родителя. Вот как это выглядит в действии:

3. Что делать, если не получилось

Бывает такое, что пишешь анимацию, а она всё равно не работает. И что делать?

3.1. Проверьте, что один элемент внутри другого

Зайдите в Chrome Dev Tools и найдите элемент, к которому подключаете анимацию. Он точно внутри нужного тега?

3.2. Проверьте селектор

На вкладке Elements в Chrome Dev Tools нажмите комбинацию клавиш Ctrl+F. Откроется поле для поиска тегов. Вбейте туда свой селектор и нажмите Enter. Нужный тег должен подсветиться жёлтым цветом. Если этого не произошло, то ваш селектор написан неправильно.

3.3. Проверьте стили

Возможно ваш стиль просто не работает. Уберите :hover и проверьте, что стиль срабатывает правильно хотя бы без анимации.

Читать дальше

Попробуйте бесплатные уроки по Python

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

Переходите на страницу учебных модулей «Девмана» и выбирайте тему.

Хочу код-ревью