Плавная анимация фона css

В этой статье рассмотрим реализацию базовых динамичных/анимационных эффектов фона блока.

 

1. Плавное изменение позиции фона

 

Благодаря свойству 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.

 

2. Плавное увеличение(зуммирование) фона

 

Изменяя размер вложенного блока child можно добиться эффекта плавного увеличения фона.

 

 

See the Pen bacground zoom by webgrind (@webgrind) on CodePen.