Анимация фона
https://webref.ru/layout/html5-css3/background/multiple
CSS
/*Пример примечателен тем, что в нём, практически не используется HTML, тег <body>, в котором содержится всё наполнение веб-странички, пуст, но раскрашен. И весь этот маленький воздушный мир, создан с помощью стилей*/
body {
background: url(http://webref.ru/assets/example/animate-bg3.png)
90% 90% no-repeat fixed, /*В первую очередь, обращаю внимание на свойство fixed, которое используется во всех трёх изображениях, применённых в данной иллюстрации. Оно означает, что слой позиционируется относительно окна броузера (и при прокрутке, если бы она имела место быть, остался бы неподвижен). 90% 90% означает что начальная координата рисунка сдвинута на 90% по горизонтали, и на 90% по вертикали. Тут есть несколько моментов:
1. Положение было бы фиксированным, если б не было анимации - последняя динамически меняет положение элементов в пространстве.
2. позиционирование идёт от левого верхнего угла, соответственно, горизонатальный процент означает сдвиг вправо, вертикальный - сдвиг вниз, при этом 100% - область экрана по каждой координате.
3. Видимо, предполагается, что сдвиг рисунка будет по области экрана, поэтому координата, похоже, считается следующим образом: левый верхний угол это 0% 0%, а правый нижний - 100% 100%. Соответственно, берём среднюю точку картины, в левом верхнем и нижнем правом углу, и смотрим, на какое расстояние картинка сдвигается по каждой координате, так, чтоб она полностью помещалась в окне, в двух этих крайних положениях. Полученное смещение по горизонтали и вертикали делим на 100, получаем, чему равен 1% по каждой координате (вертикальный и горизонтальный процент, скорее всего, различаются). Когда же у нас есть значения в процентах, то они, соответственно, умножаются на значение "единичного сдвига"(1%) и мы получаем нужное нам положение рисунка в пространстве окна браузера.
no-repeat означает что изображение используется на картине ровно один раз (а не повторяется).
Поскольку этот слой описывается первым, он...