Анимация

Анимация — обширный инструмент CSS. К сожалению, описать все возможности за один урок невозможно. В этом уроке будет показан базовый принцип анимации в CSS на основе keyframes. Для примера, сделаем анимацию текста — цвет текста меняется с голубого на красный.

Для того, чтобы задать анимацию используется правило @keyframes и название анимации:

@keyframes color-change {
  // Внутри будет наша анимация
}

Внутри keyframes необходимо указать различные временные промежутки, в которые будут меняться правила. Например на старте (0% завершённости анимации) у нас будет голубой текст, в середине анимации (50%) — красный, и в конце (100%) возвращаем голубой цвет.

@keyframes color-change {
  0% {
    color: blue;
  }

  50% {
    color: red;
  }

  100% {
    color: blue;
  }
}

Теперь необходимо применить созданную нами анимацию к тексту на странице. Для этого используется правило animation с тремя основными значениями:

  • Название анимации
  • Длительность анимации. Указывается в секундах (1s, 2s, 3s и так далее)
  • Бесконечная анимация или нет (если нет, то параметр можно не указывать)
.animation-text {
  animation: color-change 3s infinite
}

Осталось создать параграф с необходимым классом и анимация начнёт работать.

Текст с анимацией color-change. Цвет текста меняется с голубого на красный и обратно

Задание

Создайте анимацию, меняющую цвет текста с чёрного на белый. Примените анимацию к классу black-white


Нашли ошибку? Есть что добавить? Пулреквесты приветствуютсяhttps://github.com/hexlet-basics

Упражнение доступно только авторизованным пользователям.

Пожалуйста, авторизуйтесь, это необходимо для отслеживания прогресса выполнения уроков. Если у вас ещё нет учётной записи, то сейчас самое время создать аккаунт.