title: Make div fly with animation to another DOM position
body: <p><a href="https://i.stack.imgur.com/SQDeE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SQDeE.png" alt="animating an image between 2 positions and sizes"></a></p>
  
  <p>I am moving an <code>&lt;img&gt;</code> element (the octopus) from the large gray <code>&lt;div&gt;</code> above (<code>#large</code>) to the small orange <code>&lt;div&gt;</code> below (<code>#small</code>) using</p>
  
  <pre><code>$(document).on("click", "#large &gt; img", function() {
    $(this).appendTo("#small");
  });
  </code></pre>
  
  <p>This works great but <strong>I want it to transition smoothly and to 'fly' over so it will slowly interpolate its coordinates and size</strong>.</p>
  
  <p>I tried adding a CSS transition</p>
  
  <pre><code>img { transition: all 3s; }
  </code></pre>
  
  <p>to my <code>&lt;img&gt;</code>, but that won't work as the image is readded to the DOM and not moved.</p>
  
  <p>How can such animation be established?</p>
  
  <p><a href="https://jsfiddle.net/6yfv8jg2/" rel="nofollow noreferrer" title="JS Fiddle">JS Fiddle</a></p>