38. @keyframes детально

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

Что такое @keyframes?

@keyframes - это правило CSS, которое определяет последовательность кадров (ключевых точек) анимации. Каждый кадр определяет, как должен выглядеть элемент в определенный момент времени в течение анимации. Вы определяете свойства CSS для каждого кадра, и браузер плавно переходит между ними.

Основы синтаксиса

@keyframes myAnimation {
  0% {
    /* Свойства элемента в начале анимации */
    opacity: 0;
    transform: translateX(-100px);
  }
  50% {
    /* Свойства элемента в середине анимации */
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    /* Свойства элемента в конце анимации */
    opacity: 0;
    transform: translateX(100px);
  }
}

.element {
  animation-name: myAnimation; /* Название анимации */
  animation-duration: 2s; /* Продолжительность анимации */
  animation-iteration-count: infinite; /* Повторять анимацию бесконечно */
}

В этом примере мы создали анимацию с именем myAnimation. Она состоит из трех кадров: 0%, 50% и 100%. В начале анимации элемент полностью прозрачен и смещен влево. В середине он становится видимым и возвращается в исходное положение. В конце он снова становится прозрачным и смещается вправо.

Далее мы применяем эту анимацию к элементу с классом .element, используя свойства animation-name, animation-duration и animation-iteration-count.

Более гибкие ключевые слова: from и to

Вместо 0% и 100% можно использовать ключевые слова from и to, которые более интуитивно понятны:

@keyframes fadeInOut {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.fade-element {
  animation-name: fadeInOut;
  animation-duration: 1s;
  animation-fill-mode: forwards; /* Сохранить конечное состояние анимации */
}

В этом примере элемент плавно появляется в течение 1 секунды. Свойство animation-fill-mode: forwards гарантирует, что элемент останется видимым после завершения анимации.

Практические примеры кода

Пример 1: Пульсирующая кнопка

<button class="pulsating-button">Нажми меня!</button>

.pulsating-button {
  background-color: #4CAF50;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
  border: none;
  border-radius: 5px;
  animation: pulse 2s infinite; /* Применяем анимацию */
}

@keyframes pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.7);
  }
  70% {
    transform: scale(1.1);
    box-shadow: 0 0 0 10px rgba(76, 175, 80, 0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(76, 175, 80, 0);
  }
}

Пример 2: Индикатор загрузки

<div class="loader"></div>

.loader {
  border: 16px solid #f3f3f3;
  border-top: 16px solid #3498db;
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite; /* Применяем анимацию */
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

Жизненный пример

@keyframes широко используются в современных веб-сайтах и приложениях. Например:

• Интерактивные элементы: Анимация кнопок при наведении, индикаторы загрузки, слайдеры.
• UI-библиотеки и фреймворки: Bootstrap, Material UI, React Spring и другие используют @keyframes для создания плавных переходов и анимаций.
• Сайты-портфолио: Часто используют @keyframes для создания уникальных и запоминающихся анимаций, демонстрирующих навыки и креативность.

Ключевые моменты

• @keyframes определяет последовательность кадров анимации.
• Можно использовать проценты (0%, 50%, 100%) или ключевые слова from и to.
• Свойство animation-name связывает анимацию с элементом.
• Свойство animation-duration определяет продолжительность анимации.
• Свойство animation-iteration-count определяет, сколько раз повторять анимацию (например, infinite для бесконечного повторения).
• Свойство animation-fill-mode определяет, как элемент должен выглядеть до и после анимации.

Интерактивный пример