transform scale produce different result in firefox

Question

I have a very simple animation and this animation works fine in WebKit browsers(chrome, opera) but there is unusuall effect at the end of animation when I run code inside firefox(zoom effect). when I try to remove transform: scale(1) then this zoom effect will go away but I need this transform. How can I remove zoom effect for firefox ?

*{
      box-sizing: border-box;
      padding: 0;
      margin: 0;
  }
  html,body{height: 100%;}
  .img{
      width: 0%;
      height: 100%;
      transform: scale(1) ;
      background: url('https://images.unsplash.com/photo-1557389352-e721da78ad9f?   ixlib=rb1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80') center center no-repeat ;
      background-size: cover ;
      background-attachment: fixed;
      animation: anime 2s linear forwards;
  }
  @keyframes anime{
      0%{}
      100%{width: 100%;}
  }

<div class="img"></div>