В этой статье рассмотрим реализацию базовых динамичных/анимационных эффектов фона блока.
Благодаря свойству background-position можно задавать положение фона по горизонтали (значения left, center и right) и по вертикали (top, center и bottom). А с помощью transition указать время на изменение свойства, что добавит эффект плавной анимации.
See the Pen background-position by webgrind (@webgrind) on CodePen.
Также можно изменять положение фона одновременно по двум направлениям. Для этого изменить свойство background-position: right на background-position: rigth bottom.
Изменяя размер вложенного блока child можно добиться эффекта плавного увеличения фона.
See the Pen bacground zoom by webgrind (@webgrind) on CodePen.