Настройка ключевых кадров: @keyframes

keyframes

Поддержка браузерами
Настольные браузеры Chrome Firefox (Gecko) Internet Explorer Opera Safari
Базовая поддержка, версии браузеров 4 -webkit- 5.0 (5.0) -moz- 10 12 -o- 4.0 -webkit-
Мобильные браузеры Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Базовая поддержка, версии браузеров 4 -webkit- 5.0 (5.0) -moz- 10 12.1 3.2 -webkit-
Функция
@keyframes — эта функция позволяет установить ключевые кадры анимации. Для того чтобы анимация проигрывалась необходимо написать данную функцию. Вначале пишем имя анимации (оно указывается в свойстве animation-name), а затем через проценты от времени продолжительности или при помощи зарезервированных слов прописываем свойство которое будет изменяться.
Применяется
Ко всем элементам которые анимируются.
Может принимать значения
Проценты — % | from | to
Правила записи
@keyframes имя анимации {
проценты от времени продолжительности анимации { свойство : значение }
}


@keyframes имя анимации {
from { свойство : значение }
to { свойство : значение }
}
Примеры

Через 50% от 3 секунд появится линия под текстом, а через 90% от 3 секунд появится линия над текстом

Цвет фона изменится от #4573BB к #890

Поделиться