правило @keyframes

Правило @keyframes - дозволяє користувачеві описати анімацію CSS властивостей у вигляді переліку ключових кадрів.

• - задає ім'я анімації у вигляді рядка в одинарних лапках (це ім'я потім використовується при виклику анімації в якості значення властивості animation-name)
• - задає селектори які визначають ключові кадри. Вони можуть приймати значення:
  • from - всередині цього селектора описується значення анімованих властивостей в початковий момент анімації (також можна описати початковий кадр анімації, використовуючи еквівалентний селектор 0%)
  • to - всередині цього селектора описується значення анімованих властивостей в кінцевий момент анімації (також можна описати кінцевий кадр анімації, використовуючи еквівалентний селектор 100%)
  • - описує значення анімованих властивостей в даний момент часу (момент часу відраховується в процентному відношенні від значення властивості animation-duration)
• - аніміруемое CSS властивість
• - значення анімованого властивостей в момент, описуваний селектором кадру

приклад коду

У прикладі описана анімація переміщення (зміна координат блоку з плином часу). У перший момент анімації, описуваний селектором кадру from, координати блоку top: 50px, left: 0px. Наступний ключовий кадр описує значення властивостей через 50% часу анімації (в даному прикладі - 5 секунд). Координати блоку стануть top: 150px, left: 100px. В останній момент часу описується селектором кадру to (через 10с) блок отримає абсолютні координати top: 400px, left: 300px. Зауваження! Анімація відбувається не в три ривка, а плавно.

На даний момент не підтримується жодною з браузерів