Css Zoom Into Specific Image Point

I have an image which I need to zoom a specific point depending on which input is focused Here's a fiddle so far I used the attributes transform and transform-origin. It's workin

Solution 1:

I experimented with putting both the transform and the transform-origin into a CSS animation and it seemed to manage to do them both at once, so avoiding the 2 step problem you saw on Chrome (tested on Edge):

@keyframes focusin {
    0% {
      transform: scale(1);
      transform-origin: 0%0%;
      }
    
    100% {
      transform: scale(3);
      transform-origin: 25%75%;
      }
  
}

Here's a snippet. I've put the animation time to 10s so you can see the 'journey' the paper takes when focus is on input1. It seems to be smooth, so a bit of an improvement, but it isn't 'direct' on Edge/Chrome which I guess (and it is only a guess) is to do with how the browser animates (or doesn't) transform-origin.

$("#input1").focus(function(e) {
 /* $("#image").css({
    "transform": "scale(3)",
    "transform-origin": "25% 75%" 
  });*/document.getElementById('image').style.animationName = 'focusin';
});

$("#input2").focus(function(e) {
  $("#image").css({
    "transform": "scale(3)",
    "transform-origin": "75% 25%"
  });
});

$("#input1, #input2").focusout(function(e) {
  $("#image").css({
    "transform": "scale(1)"
  });
});

#wrapper {
  width: 400px;
  height: 267px;
  border: 1px solid black;
  overflow: hidden;
  position: relative;
}

#image {
  background-image: url('http://i.imgur.com/n9q7jhm.jpg');
  background-size: 400px267px;
  background-position: center;
 /* transition: all 1s ease; */width: 100%;
  height: 100%;
 /* transform: scale(1); */position: relative;
  left: 0;
  top: 0;
  animation-duration: 10s;
  animation-iteration-count: 1;
  animation-name: none;
  animation-fill-mode: forwards;
}
@keyframes focusin {
    0% {
      transform-origin: 0%0%;
      transform: scale(1);
      }
    100% {
      transform-origin: 25%75%;
      transform: scale(3);
      } 
}

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><inputtype="text"id="input1"><inputtype="text"id="input2"><divid='wrapper'><divid='image'></div></div>