Анимации

CSS анимации с @keyframes – как работят и как да ги активирате

CSS анимациите позволяват да дефинирате движение и промяна на стилове без потребителско действие, за разлика от transition, който се задейства при събитие (например hover). Най-важното е, че анимацията има две части: дефиниция с @keyframes и прилагане чрез animation свойства върху конкретен елемент. Без да зададете име и продължителност, анимацията няма да се изпълни.

Стъпка по стъпка: създаване на проста анимация

1. Добавете нов елемент (например ul с li) и му премахнете transition.
2. Дефинирайте анимация:

• Създайте @keyframes Slide
• Вътре използвайте from { left: 0; }
• И to { left: 250px; }

1. Прикачете анимацията към елемента:

   • Задайте име на анимацията
   • Задайте продължителност (например 1 секунда)

2. Презаредете страницата – елементът ще се премести от 0 до 250px и ще се върне в начална позиция.

Основни CSS свойства и правила

• @keyframes – дефинира фазите на анимацията (from и to).
• animation-name – указва коя анимация да се използва.
• animation-duration – задава продължителността (например 1s).
• left – определя хоризонталното изместване (изисква позициониране).

Това е базовият модел на всяка CSS анимация – първо я описвате, след това я активирате върху конкретен елемент.