Всевозможные анимационные элементы на веб страницах не только развлекают и делают страницу более яркой и заметной, но и порой привлекают внимание к главному, важному.
И в случае с CSS, все мигания, мерцания и тому подобное как раз и осуществляется за счет изменения стилей. Сами стили можно менять разными способами, будь то скрипт JS или даже без обращения к нему, то есть написанием определенных правил исключительно для CSS. Так как данный раздел сайта именно про CSS, то и изменение бэкграунда (background) будет написано на чистом CSS.
Принцип изменения CSS (правила)
Правила для замены первоначальных стилей задаются с помощью @keyframes, то есть этот то, что и работает с анимацией, настраивает ее, изменяет. Однако до того, как начать работать с анимацией, надо определиться как инициировать то, что будем менять. Сделать это можно двумя способами. Первый, это назначить для блока который будет меняться свой класс, а потом в стилях работать с этим классом. Второй вариант, использовать animation-name.
Кроме этого в стиле можно прописать следующие сценарии:
animation-duration
Определяет время, в течение которого должен пройти один цикл анимации.
animation-timing-function
Настраивает ускорение анимации.
animation-delay
Настраивает задержку между временем загрузки элемента и временем начала анимации.
animation-iteration-count
Определяет количество повторений анимации; Вы можете использовать значение infinite для бесконечного повторения анимации.
animation-direction
Дает возможность при каждом повторе анимации идти по альтернативному пути, либо сбросить все значения и повторить анимацию.
animation-fill-mode
Настраивает значения, используемые анимацией, до и после исполнения.
animation-play-state
Позволяет приостановить и возобновить анимацию.
Что же, теперь пару примеров того, о чем я сейчас говорил.
Пример с изменением бэкграунда (background)
Пример 1 (через class для div)
Смотреть код
Пример 2 (через animation-name. Плюс в том, что можно присваивать анимацию независимо от класса, а исходя из определения элемента в HTML)
Смотреть код
Кроме того, в этом примере временные рамки не определены в процентах, то есть нет 0% и 100%. Здесь эти понятия заменены from и to. То есть "от" и "до".
В том и другом случае мы видимо одно и то же, но реализовано это по-разному.