Онлайн-инструмент CSS3 Animation Generator

Animation

Генератор CSS-анимации для ленивых.

CSS анимации

CSS позволяет анимировать элементы HTML без использования JavaScript или Flash.

В этой главе вы узнаете о следующих свойствах:

  • @keyframes
  • имя-анимации
  • продолжительность анимации
  • анимация-задержка
  • количество итераций анимации
  • анимация-направление
  • функция времени анимации
  • режим заливки анимации
  • анимация

Префиксы для конкретных браузеров

Некоторым старым браузерам требуются определенные префиксы (-webkit-) для понимания свойств анимации.

 

Что такое CSS-анимация?

Анимация позволяет элементу постепенно переходить от одного стиля к другому.

Вы можете изменять столько свойств CSS, сколько захотите, сколько угодно раз.

Чтобы использовать CSS-анимацию, вы должны сначала указать несколько ключевых кадров для анимации.

Ключевые кадры содержат стили, которые элемент будет иметь в определенное время.

 

Правило @keyframes

Когда вы указываете стили CSS внутри правила @keyframes, анимация будет постепенно переходить от текущего стиля к новому стилю в определенное время.