Анімації CSS

Модуль Анімацій CSS дає змогу анімувати значення властивостей CSS, як то background-position і transform, протягом часу, за допомогою ключових кадрів. Кожний ключовий кадр описує те, як анімований елемент повинен візуалізуватися в певний час протягом анімаційної послідовності. У модулі анімацій можна використовувати властивості для контролю тривалості, числа повторень, відкладеного старту та інших аспектів анімації.

Анімації в дії

Щоб переглянути анімацію в рамці нижче, клацніть поле 'Відтворити анімацію' або наведіть на цю рамку курсор. Коли анімація активна, хмарка згори змінює форму, падають сніжинки, і рівень снігу внизу зростає. Щоб призупинити анімацію, зніміть галочку з поля або відведіть курсор від рамки.

Цей зразок анімації використовує animation-iteration-count для того, щоб сніжинки падали раз за разом, animation-direction, щоб хмарка рухалася туди-сюди, animation-fill-mode, щоб рівень снігу зростав у відповідь на рух хмарки, та animation-play-state, щоб призупинити анімацію.

Щоб переглянути код цієї анімації, дивіться вихідний код на GitHub.

Довідка

Властивості

• Скорочення animation
• animation-composition
• animation-delay
• animation-direction
• animation-duration
• animation-fill-mode
• animation-iteration-count
• animation-name
• animation-play-state
• animation-timing-function
• animation-timeline

Директиви

• @keyframes

Події

Всі анімації, навіть ті, що мають тривалість 0 секунд, викидають анімаційні події.

• animationstart
• animationend
• animationcancel
• animationiteration

Інтерфейси

• API Вебанімацій(/uk/docs/Web/API/Web_Animations_API)
• AnimationEvent
• CSSKeyframeRule
• CSSKeyframesRule

Посібники

Застосування Анімацій CSS

Покроковий підручник зі створення анімацій за допомогою CSS. Ця стаття описує властивості CSS і директиву, що стосуються анімації, а також те, як вони взаємодіють одне з одним.

Поради та хитрощі Анімацій CSS

Поради та хитрощі, що допоможуть отримати максимум від Анімацій CSS.

Споріднені концепції

• Властивість CSS will-change
• Тип даних <easing-function>
• Медіазапит prefers-reduced-motion
• Термін глосарія Крива Безьє

Специфікації

Дивіться також

• Прокрутні анімації CSS
• Властивості модуля Переходів CSS можуть запускати анімації на основі користувацьких дій
• Елемент HTML <canvas> поряд з API полотна та API WebGL для малювання графіки та анімацій
• Інтерфейс SVGAnimationElement для всіх інтерфейсів елементів, що стосуються анімації, включно з SVGAnimateElement, SVGSetElement, SVGAnimateColorElement, SVGAnimateMotionElement і SVGAnimateTransformElement