Генератор CSS-анимации для ленивых.
CSS анимации
CSS позволяет анимировать элементы HTML без использования JavaScript или Flash.
В этой главе вы узнаете о следующих свойствах:
- @keyframes
- имя-анимации
- продолжительность анимации
- анимация-задержка
- количество итераций анимации
- анимация-направление
- функция времени анимации
- режим заливки анимации
- анимация
Префиксы для конкретных браузеров
Некоторым старым браузерам требуются определенные префиксы (-webkit-) для понимания свойств анимации.
Что такое CSS-анимация?
Анимация позволяет элементу постепенно переходить от одного стиля к другому.
Вы можете изменять столько свойств CSS, сколько захотите, сколько угодно раз.
Чтобы использовать CSS-анимацию, вы должны сначала указать несколько ключевых кадров для анимации.
Ключевые кадры содержат стили, которые элемент будет иметь в определенное время.
Правило @keyframes
Когда вы указываете стили CSS внутри правила @keyframes, анимация будет постепенно переходить от текущего стиля к новому стилю в определенное время.