Ми можемо об'єднати кілька простих анімацій разом, використовуючи CSS-правило @keyframes . Воно визначає «ім'я» анімації та правила: що, коли та де анімувати. Після цього можна використовувати властивість animation, щоб призначити анімацію на елемент і визначити її додаткові параметри. Збережена копія

У CSS є властивість animation, яка дозволяє анімувати практично будь-яка властивість HTML елемента. Правило анімації вказується в блоці keyframes. Властивість animation може бути використана для анімації інших властивостей CSS, таких як колір тла, висота, довжина, положення елемента та багато інших. Збережена копія

Основний принцип створення CSS-анімації – створити об'єкт або контейнер у HTML та привласнити йому CSS-стилі. Стилі описують зовнішній вигляд об'єкта, запускають анімацію та надають ефектів. Щоб стилі запрацювали, потрібно прописати їх в окремому файлі CSS, який прив'язується до HTML-документу за допомогою рядка коду.