Telegram, whatsApp, тел.:
8 (918) 0538468, e-mail: info@webstyling.ru

Как сделать анимацию фона

Как сделать анимацию фона Современный браузеры позволяют реализовывать через css, то что совсем недавно можно было реализовать только с помощью javascript, причем в десятки раз более коротким и простым кодом.
Например, можно реализовать плавное изменение размеров фона, движение и др.

Для реализации необходимо:
1. Cоздать анимацию в файле стилей c помощью ключевого слова @keyframes
Необходимо придумать название для ваше анимации, например "increase" и рассчитать количество ключевых кадров, их может быть любое количество. Для каждого кадра задаются свойства фона, в примере - позиция фона.

Синтаксис создания анимации(любой анимации, не обязательно анимации фона):
@keyframes <переменная> { [ from | to | <проценты> ] [, from | to | <проценты> ]* }

Пример создания анимации фона:
@keyframes increase { 0% { background-position: 0px; } 50% { background-position: 100px; } 100% { background-position: 0px; } }

2. Назначить анимацию нужному элементу
.animated_div{ animation: increase 25s ease-in-out; }

Где "increase" -название анимации, "25s" - 25 секунд длительность анимации, "ease-in-out" - функция анимации.

Возможные значения для функций анимации:
linear - анимация с постоянной скоростью, линейная функция.
ease - медленно начинается и медленно заканчивается, ускоряясь к середине.
ease-in - постепенно ускоряется.
ease-out - постепенно замедляется
ease-in-out -Анимация медленно начинается и медленно заканчивается
cubic-bezier(x1, y1, x2, y2) Позволяет вручную установить значения от 0 до 1.
step-start - задаёт пошаговую анимацию, разбивая анимацию на отрезки, изменения происходят в начале каждого шага. Вычисляется в steps(1, start).
step-end - пошаговая анимация, изменения происходят в конце каждого шага. Вычисляется в steps(1, end).
steps(количество шагов,положение шага) - ступенчатая временная функция initial -Значение по умолчанию.
inherit - Наследует значение родительского элемента.

Возврат к списку