§ Анимиране на DOM елементи в CSS

Основните начини за правене на анимация в CSS са:

1. Използване на CSS класове с transition свойство - този начин за анимация използва два или повече CSS класа, които се превключват помежду си, за да се покаже анимацията. Свойството transition се използва за да се определи продължителността и вида на прехода между двата класа.

Пример:

.fade-in {
  opacity: 0;
}
.fade-in.active {
  opacity: 1;
  transition: opacity 1s ease-in;
}

2. @keyframes е друго правило, което се използва за дефиниране на анимация. С помощта на @keyframes можем да дефинираме всички стадии на анимацията - от началното състояние до крайното, както и да определите дължината и вида на прехода между стадиите. След това можете да използвате чanimationч свойството, за да зададете какъв обект да използва дефинираната анимация.

Пример:

/* Дефиниране на анимацията */
@keyframes fade-in {
  /* Определяне на началното състояние на анимацията */
  from {
    opacity: 0;
  }

  /* Определяне на крайното състояние на анимацията */
  to {
    opacity: 1;
  }
}

/* Стилове за елемент, който ще използва анимацията */
.fade-in-element {
  /* Прилагане на анимацията */
  animation: fade-in 1s ease-in;
}