end video

Този урок е достъпен само в платената версия на курса.

Вземи достъп до всички уроци 💫 цена: 99лв.

Ако вече имаш регистриран профил натисни тук.

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

CSS предлага няколко инструмента за анимиране на DOM елементи. В този урок ще ги разгледаме по-отблизо.

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

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

Пример:

.fade-in {
  opacity: 0;
}
.fade-in.active {
  opacity: 1;
  transition: opacity 1s ease-in;
}
  1. @keyframes е друго правило, което се използва за дефиниране на анимация. С помощта на @keyframes можем да дефинираме всички стадии на анимацията - от началното състояние до крайното, както и да определите дължината и вида на прехода между стадиите. След това можете да използвате чanimationч свойството, за да зададете какъв обект да използва дефинираната анимация.

Пример:

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

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

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

Практика

Практиката е най-бързия начин да усвоиш знания трайно. Подготвил съм ти малка задача свързана с урока.

Практика
discussion

Материали

Материали свързани с урока:
Документация в MDN (transitions)
Документация в MDN (animations)
Файлове към урока

Материали

Следва: Responsive design(09:03)

Към урока →