Как реализуются CSS-анимации?

Question

CSS-анимации реализуются с помощью transition и animation.transition используется для плавного изменения свойств между состояниями.animation позволяет описывать сложные анимации через ключевые кадры.Анимации выполняются браузером и не требуют JavaScript.

YeaHub · Accepted Answer

CSS предоставляет два основных механизма для анимации интерфейса, которые работают декларативно и хорошо оптимизируются браузером.ОпределениеCSS-анимация — это изменение CSS-свойств элемента во времени с помощью встроенных механизмов браузера.Основные способы анимацииtransitionИспользуется для плавного перехода между двумя состояниями элемента.Анимация запускается при изменении CSS-свойства.Пример:.button {
  background-color: blue;
  transition: background-color 0.3s ease;
}

.button:hover {
  background-color: red;
}
animation и @keyframesПозволяет описывать последовательность состояний анимации.Не требует изменения состояния элемента.Пример:@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.modal {
  animation: fadeIn 0.5s ease;
}
Особенности CSS-анимацийВыполняются на стороне браузераЧасто используют GPU при transform и opacityХорошо подходят для UI-эффектовВыводCSS-анимации — простой и эффективный способ добавить динамику интерфейсу. Они подходят для большинства визуальных эффектов и не требуют JavaScript.