Для создания анимации фона с помощью CSS можно использовать ключевые кадры (keyframes). 4 Нужно определить последовательность анимации, а затем применить её к фоновому элементу с помощью таких свойств, как animation-duration и animation-iteration-count. 4

Один из способов создания анимированного фона: 1

1. Подготовить картинку, желательно двухцветную. 1 В графическом редакторе нужно выделить область, которую планируется анимировать, и удалить выделенную область, а также все нижние слои, чтобы фон был прозрачным. 1 Картинку следует сохранить в формате .png. 1
2. Вставить картинку на страницу. 1 Нужно задать ей фон, например красный, чтобы в браузерах, которые не поддерживают такой способ анимации, картинка не осталась прозрачной. 1
3. Добавить анимацию. 1 Для этого в файл со стилями (например, style.css) нужно добавить код, который определяет последовательность изменений фона. 1
4. Добавить анимацию к картинке. 1 Для этого используется свойство -webkit-animation или -moz-animation. 1

Ещё один способ — создание эффекта бесконечной прокрутки фонового изображения. 2 Для этого нужно настроить изображение на повторение внутри контейнера с заданной высотой и шириной, а затем создать анимацию, которая будет перемещать повторяющееся изображение внутри контейнера. 2

Также с помощью CSS можно анимировать SVG-фоны. 4 Нужно определить формы в SVG, а затем анимировать их свойства с помощью CSS. 4