Как анимировать изменение положения фонового изображения с помощью CSS?

Чтобы анимировать изменение положения фонового изображения с помощью CSS, можно использовать свойство background-position. webgrind.ru С его помощью можно задавать положение фона по горизонтали (значения left, center и right) и по вертикали (top, center и bottom). webgrind.ru

Пример кода: misha.agency

@keyframes animatedBackground {   0% { background-position: 0 0 }   100% { background-position: -600px 600px /* анимируем свойство background-position */ } }  #fon {   height: 340px; /* задаём произвольную высоту и ширину блока */   width: 100%;   background-image: url('URL вашего фонового изображения');   animation: animatedBackground 60s linear infinite;   -moz-animation: animatedBackground 60s linear infinite;   -webkit-animation: animatedBackground 60s linear infinite;   -o-animation: animatedBackground 60s linear infinite; } 

Также с помощью свойства transition можно указать время на изменение свойства, что добавит эффект плавной анимации. webgrind.ru