title: Is it possible to maintain object-fit during a CSS transform?
body: <p>I'm working on a component that transitions an image from a start position + scale to an end position + scale (i.e. to fill up the screen). This is done with a CSS transform animation on <code>translate</code> and <code>scale</code>. </p>
  
  <p>The challenge is that some of the images to transition from may be altered by component users using the <code>object-fit</code> property. However, it appears that the <code>CSS translate</code> does not maintain the <code>object-fit</code> property during translate. </p>
  
  <p>Codepen example here: <a href="https://codepen.io/cathyxz/pen/mXgEMB" rel="nofollow noreferrer">https://codepen.io/cathyxz/pen/mXgEMB</a></p>
  
  <p>I know I could technically animate <code>width</code> and <code>height</code>, but I want to keep in line with properties that browsers can <a href="https://www.html5rocks.com/en/tutorials/speed/high-performance-animations/" rel="nofollow noreferrer">animate cheaply</a> for performance reasons, i.e. nothing that affects layout, which leaves us with only position, rotation, scale, opacity. </p>
  
  <p>References: <a href="https://www.html5rocks.com/en/tutorials/speed/high-performance-animations/" rel="nofollow noreferrer">https://www.html5rocks.com/en/tutorials/speed/high-performance-animations/</a></p>
  
  <p>Is there anyway I can gradually animate my transition to "uncrop" images instead of stretching them? </p>