По сути задача интересная, ведь иногда проще использовать уже готовые анимированные фрагменты, чем делать их самому "с нуля". Ну например, есть у вас gif - анимация некого персонажа, да еще и с прозрачным фоном. И у вас возникает непреодолимое желание создать с помощью этого готового фрагмента нечто большее. А большее сделать действительно можно ... и как всегда мы сделаем это легко!

Вначале давайте, в общих чертах, обрисуем чего мы собственно хотим добиться на нашем занятии. Итак, у нас есть gif анимация целеустремленно идущего куда-то Винни Пуха. Видимо пытающегося выбраться из пустоты прозрачного фона, в места ему более привычные. Мы ему поможем осуществить это желание, по травке пустим его прогуляться, ну небо там с солнышком предоставим, елки-палки разные. А чтобы придать прогулке анимационной вид сходства с реальностью, используем принцип относительности движения (да простит нас великий Альберт Эйнштейн за эти вольности в трактовке его великой теории). А как мы эту самую относительность движения применим в данном случае - о том читайте далее ....